clientWidth/offsetWidth/scrollWidth获取为值非自身实际宽度而是屏幕宽度

最新推荐文章于 2023-08-10 16:16:59 发布
最新推荐文章于 2023-08-10 16:16:59 发布
阅读量538 收藏
点赞数 1
文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bigPatrickstar/article/details/124640775
版权
遇到javascript中clientWidth、offsetWidth、scrollWidth返回值为屏幕宽度而非元素自身宽度的问题。解决方案是等待浏览器渲染完成后再进行获取，但原因未知。
摘要由CSDN通过智能技术生成

clientWidth/offsetWidth/scrollWidth 今天碰到了三个老 6 获取值老是为屏幕的宽度而不是自身宽度，代码如下

<body>
  <div class="parent">
    <div class="children
最低0.47元/天 解锁文章
poplink2077
关注
scrollWidth,clientWidth与offsetWidth的区别
10-30
这一属性非常适用于获取元素的实际可用宽度，特别是在处理自适应布局或者响应式设计时尤为重要。 - **应用场景**：常用于响应式设计，比如当窗口大小变化时，通过监听 **clientWidth** 的变化来调整元素的布局。 - ...
clientWidth，clientHeight 窗口宽高获取异常问题记录
qq_41206597的博客
03-18 1798
获取窗口可视化宽高，实际获取与，盒模型展示差异问题解决记录
网页宽高clientWidth clientHeight获得数值不对的问题
weixin_30663391的博客
07-12 2988
当网页内容撑不满一屏时，通过以下代码获得整个网页高度会有问题 document.body.clientHeight;document.body.clientWidth;得到的宽高不对，可能是因为html与body标签缺一个样式：height:100%设置如下： html{ height: 100%; overflow: h...
clientWidth, offsetWidth,scrollWidth的实际宽度
weixin_44041414的博客
06-22 243
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding:
document.body.scrollWidth、document.documentElement.scrollWidth系列宽高值对比
YinghaoGuo的博客
06-02 5992
最近深入研究了一下body.scrollWidth、document.documentElement.scrollWidth等等类似的一系列浏览器宽高的值，清晰总结了一下，还是通过代码的方式说明问题： body{border: 10px solid red;margin: 0;padding: 0;} #one{ min-wi
用document.body.clientWidth不能获取准确值的问题
tmoonlight的专栏
05-23 1万+
 网络上普遍使用document.body.clientHeight和document.body.clientWidth获得窗口的高和宽。但是使用VS2005创建的页面中,却无法使用这两个属性获得准确的窗口高度和宽度。 原因: VS2005创建的页面遵循XHTML 1.0文档标准, 在HTML的头中声明如下:        解决方法: 使用document.documentElement.cli
关于不同浏览器获得clientWidth 与clientHeight 的不同结果
lq110713114的专栏
11-15 770
function getInfo() { var s = ""; s = " 网页可见区域宽：" document.body.clientWidth; s = " 网页可见区域高：" document.body.clientHeight; s = " 网页可见区域宽：" document.body.offsetWidth " (包括边线和滚动条的宽)"; s = " 网页可见区域高.
scrollWidth,clientWidth,offsetWidth的区别
09-03
首先，`scrollWidth`表示的是元素内容的实际宽度，包括不可见的部分，比如被滚动条遮挡的内容。当元素内容超出其可视区域时，`scrollWidth`的值会比`clientWidth`大，因为它包含了滚动条所占据的空间。即使没有滚动...
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
10-30
- **offsetWidth**: 获取元素相对于版面或由父坐标 `offsetParent` 属性指定的父坐标的宽度，它等于元素的宽度加上内边距（padding）和边框（border）的宽度。 - IE6.0、Firefox 1.06+：`offsetWidth = width + ...
javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解
10-29
在JavaScript中，`scrollLeft`, `scrollWidth`, `clientWidth`, `offsetWidth` 等属性是处理元素尺寸和滚动位置的重要工具。这些属性各自代表着不同的意思，在实际开发中有着广泛的应用。 `scrollLeft` 属性用于...
js 获取width为auto时的实际宽度
jazywoo_在路上
08-16 6753
要获取div运行时的width，需要用到currentStyle(IE),defaultView(FF) 样式值  function getStyle( elem, name ) { //如果该属性存在于style[]中，则它最近被设置过(且就是当前的) if (elem.style[name]) return elem.style[name
解决在Firefox(<21)下获取 scroll[Width|Height] 值不正确的bug
weixin_33709219的博客
06-13 344
为什么80%的码农都做不了架构师？>>> ...
offsetWidth获取元素宽度不准确
贝贝的博客
06-09 3489
关于offsetWidth获取元素宽度不准确的问题 今天用js写轮播图的时候，发现使用offsetWidth获取foucs的宽度和我css设置的宽度不一致，如下： 在谷歌控制台输出的确是722，一开始我以为代码哪里出了问题，后来发现，原来是foucs里面的margin左右设置的是auto，于是我将auto改成一个准确的数字之后控制台输出的终于是721和css设置的一致 ...
【前端 | CSS】盒模型clientWidth、clientHeight、offsetWidht、offsetHeight
最新发布
趟过java，遇见web
08-10 1648
只读属性Element.clientWidth对于内联元素以及没有 CSS 样式的元素为 0；该属性包括内边距（padding），但不包括边框（border）、外边距（margin）和垂直滚动条（如果存在） offsetWidth 是测量包含元素的边框 (border)、水平线上的内边距 (padding)、竖直方向滚动条 (scrollbar)（如果存在的话）、以及 CSS 设置的宽度 (width) 的值。
vue 获取 指定元素的高度宽度等（使用vue中的 ref 获取到的是 dom 元素高度或者宽度）
热门推荐
KLW75
07-14 5万+
使用 vue 的时候，想要获得一个指定的元素的高度时，可以使用 vue 中的ref 。 当 ref 加在普通的元素上，使用 this.ref.name 获取到的是 dom 元素 示例 写在 页面 html 部分的 <div ref="init"></div> 写在 页面 方法 部分 这里的offsetHeight 是返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） let height= this.$refs.init.offsetHeight...
认识clientWidth/offsetWidth/scrollWidth
weixin_33827965的博客
02-13 91
首先,我们来设置一个宽高为100px的容器，此时，容器未出现滚动条，clientWidth,offsetWidth,scrollWidth的大小都为100px，即容器的宽 然后，在input中输入一定字符串，直到出现横向滚动条时，发现了scrollWidth宽度变为了208，即第4行宽度 继续输入，会发现纵向也出现滚动条，此时clientWidth变成了83, 改变容器的...
css通用小笔记03——浏览器窗口变小 div错位的问题
weixin_30843605的博客
07-15 264
我最近写网页的时候，经常碰到一个普遍的问题，经过我的查阅和尝试，终于解决了这一问题，这里有两种方法提供给大家，如果博友还有更好的方法，欢迎补充。 一.使用min-width属性： 我们先看看下面这段代码（html）： 1 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 2 ...
JS Javascript获取用户视口宽(响应式准备) window.innerWidth以及document.documentElement.clientWidth以及相关兼容解决
箜的博客
01-11 1677
JS Javascript 获取用户视口宽 window.innerWidth以及document.documentElement.clientWidth以及相关兼容解决获取用户视口宽高为下一节响应式布局做准备包括滚动条的浏览器宽度高度获取方式 window.inner不包括滚动条的浏览器宽度高度获取方式当有文档声明时:document.documentElement当没有文档声明时:document.body 获取用户视口宽高为下一节响应式布局做准备 包括滚动条的浏览器宽度高度获取方式 window.in
HTML学习：scrollWidth、clientWidth与offsetWidth解析
在这个属性中，当内容未超过元素的宽度，不产生横向滚动条时，`scrollWidth`和`clientWidth`的值相同。一旦内容超出了可视区域，`scrollWidth`将大于`clientWidth`。 `offsetWidth`则代表元素的完整宽度，包括边框...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值