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

最新推荐文章于 2023-08-10 16:16:59 发布
原创 最新推荐文章于 2023-08-10 16:16:59 发布 · 660 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js #前端

遇到javascript中clientWidth、offsetWidth、scrollWidth返回值为屏幕宽度而非元素自身宽度的问题。解决方案是等待浏览器渲染完成后再进行获取，但原因未知。

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

<body>
  <div class="parent">
    <div class="children"
最低0.47元/天 解锁文章
poplink2077
关注
元素尺寸总结（offsetWidth，clientWidth，scrollWidth）
时清云的博客
06-27 1704
最近自己实现了一个瀑布流的插件，里面需要获取元素相关的尺寸，所以趁此想总结一下元素尺寸相关的内容。 1、偏移尺寸（offset） offsetLeft、offsetTop、offsetHeight、offsetWidth 偏移尺寸，包含元素在屏幕上占用的所有视觉空间。 元素在页面上的视觉空间由其高度和宽度决定，包括所有内边距（padding）、滚动条和边框（但不包含外边距（margin））。以下4个属性用于取得元素的偏移尺寸。 offsetTop，元素上边框外侧距离包含元素上边框内侧的像素数。(不包括元素上
网页宽高clientWidth clientHeight获得数值不对的问题
weixin_30663391的博客
07-12 3170
当网页内容撑不满一屏时，通过以下代码获得整个网页高度会有问题 document.body.clientHeight;document.body.clientWidth;得到的宽高不对，可能是因为html与body标签缺一个样式：height:100%设置如下： html{ height: 100%; overflow: h...
clientWidth，clientHeight 窗口宽高获取异常问题记录
qq_41206597的博客
03-18 2089
获取窗口可视化宽高，实际获取与，盒模型展示差异问题解决记录
vue 获取 指定元素的高度宽度等（使用vue中的 ref 获取到的是 dom 元素高度或者宽度）
热门推荐
KLW75
07-14 6万+
使用 vue 的时候，想要获得一个指定的元素的高度时，可以使用 vue 中的ref 。 当 ref 加在普通的元素上，使用 this.ref.name 获取到的是 dom 元素 示例 写在 页面 html 部分的 <div ref="init"></div> 写在 页面 方法 部分 这里的offsetHeight 是返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） let height= this.$refs.init.offsetHeight...
clientWidth, offsetWidth,scrollWidth的实际宽度
weixin_44041414的博客
06-22 310
<!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 6107
最近深入研究了一下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
scrollWidth,clientWidth与offsetWidth的区别
10-30
这一属性非常适用于获取元素的实际可用宽度，特别是在处理自适应布局或者响应式设计时尤为重要。 - **应用场景**：常用于响应式设计，比如当窗口大小变化时，通过监听 **clientWidth** 的变化来调整元素的布局。 - ...
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 + ...
关于不同浏览器获得clientWidth 与clientHeight 的不同结果
lq110713114的专栏
11-15 845
function getInfo() { var s = ""; s = " 网页可见区域宽：" document.body.clientWidth; s = " 网页可见区域高：" document.body.clientHeight; s = " 网页可见区域宽：" document.body.offsetWidth " (包括边线和滚动条的宽)"; s = " 网页可见区域高.
关于body.clientHeight，body.clientWidht获取的不是可视高度的问题
qq_42814833的博客
08-05 807
我发现网上一些教程可能都是10几年前的老古董了，经过不知道多少号复制翻新，导致有时候你很难去发现问题，甚至是大部分的教程都是这么写的，害人不浅。问题的经过是这样的，我需要获取页面的可视高度。网上搜一搜，全部都说使用body.clientHeight来获取，结果嘛获取的是body的总高度。总结一下，在标准模式下使用根节点来获取可视高度才是正确的。要使用的是根节点的clientHeight，也就是。所谓标准模式的判定是你在HTML文件上方声明了。经过我一番查找，发现问题所在。下才能返回可视高度，在。......
js 获取width为auto时的实际宽度
jazywoo_在路上
08-16 6912
要获取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 421
为什么80%的码农都做不了架构师？>>> ...
offsetWidth获取元素宽度不准确
贝贝的博客
06-09 3752
关于offsetWidth获取元素宽度不准确的问题 今天用js写轮播图的时候，发现使用offsetWidth获取foucs的宽度和我css设置的宽度不一致，如下： 在谷歌控制台输出的确是722，一开始我以为代码哪里出了问题，后来发现，原来是foucs里面的margin左右设置的是auto，于是我将auto改成一个准确的数字之后控制台输出的终于是721和css设置的一致 ...
js获取屏幕尺寸、clientWidth、offsetWidth、scrollWidth等区别
yiyueqinghui的博客
11-14 2314
js获取元素/屏幕宽高 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Title&amp;lt;/ti
【前端 | CSS】盒模型clientWidth、clientHeight、offsetWidht、offsetHeight
趟过java，遇见web
08-10 2113
只读属性Element.clientWidth对于内联元素以及没有 CSS 样式的元素为 0；该属性包括内边距（padding），但不包括边框（border）、外边距（margin）和垂直滚动条（如果存在） offsetWidth 是测量包含元素的边框 (border)、水平线上的内边距 (padding)、竖直方向滚动条 (scrollbar)（如果存在的话）、以及 CSS 设置的宽度 (width) 的值。
认识clientWidth/offsetWidth/scrollWidth
weixin_33827965的博客
02-13 129
首先,我们来设置一个宽高为100px的容器，此时，容器未出现滚动条，clientWidth,offsetWidth,scrollWidth的大小都为100px，即容器的宽 然后，在input中输入一定字符串，直到出现横向滚动条时，发现了scrollWidth宽度变为了208，即第4行宽度 继续输入，会发现纵向也出现滚动条，此时clientWidth变成了83, 改变容器的...
获取 屏幕 宽度
最新发布
09-11
<think> 我们讨论的是在网页环境中获取屏幕宽度的方法，而不是React Native。根据引用内容，我们可以总结多种获取屏幕宽度的方法。 引用中提到了几种不同的宽度概念： 1. 窗口宽度（视口宽度） 2. 文档宽度（整个页面的宽度，可能超出视口） 3. 屏幕分辨率宽度 我们需要区分： - 浏览器窗口的可见区域宽度（视口宽度）：即用户当前看到的区域。 - 整个网页的宽度：如果网页很长或者很宽，可能超出视口。 - 设备的屏幕分辨率宽度：物理屏幕的像素尺寸。 根据引用，我们可以得到以下方法： 1. 获取窗口（视口）宽度： - `document.documentElement.clientWidth` 或 `document.body.clientWidth`（引用[1]） - 注意：现代浏览器更推荐使用`window.innerWidth`来获取包含滚动条在内的视口宽度，而`document.documentElement.clientWidth`不包含滚动条。 2. 获取整个文档的宽度（包括被卷出去的部分）： - `document.body.offsetWidth`（引用[3]） - `document.documentElement.scrollWidth`（更准确，因为body可能不是根元素） 3. 获取屏幕分辨率宽度： - `window.screen.width`（引用[3]） 另外，引用[2]提到了布局视口的概念，在移动端需要注意。 实际上，我们通常最关心的是视口宽度（即浏览器窗口的宽度），因为这对于响应式设计非常重要。 推荐的方法： 1. 视口宽度（包含滚动条）： `window.innerWidth` 2. 视口宽度（不包含滚动条）： `document.documentElement.clientWidth` 3. 屏幕宽度（设备物理像素）： `window.screen.width` 注意：在移动端，我们通常使用视口宽度来调整布局。另外，在CSS中，我们通常使用媒体查询，但有时候我们需要用JS来获取。 另外，引用[4]提到了微信小程序获取屏幕宽度的方法，使用`wx.getSystemInfoSync().windowWidth`，但这是微信小程序环境，不是浏览器。 因此，针对浏览器环境，我们总结如下： 方法1：`window.innerWidth` —— 获取浏览器窗口的宽度，包括垂直滚动条（如果有）。 方法2：`document.documentElement.clientWidth` —— 获取html元素的宽度，通常就是视口的宽度（不包括滚动条）。 方法3：`document.body.clientWidth` —— 获取body元素的宽度（不包括滚动条），但需要注意body的宽度可能不等于视口宽度，特别是当body有边距或边框时。 由于浏览器差异，最可靠的方法是使用`window.innerWidth`（如果需要包括滚动条）或者使用`document.documentElement.clientWidth`（不包括滚动条）。 如果我们需要整个文档的宽度（包括超出视口的部分），则可以使用： `Math.max( document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, document.documentElement.offsetWidth, document.documentElement.clientWidth )` 但通常，我们只需要视口宽度。 因此，回答用户问题：获取屏幕宽度（实际上通常指视口宽度）的方法，我们可以这样写： 在浏览器中获取屏幕宽度（视口宽度）的常用方法： 1. 使用`window.innerWidth`：返回包括垂直滚动条在内的窗口宽度。 2. 使用`document.documentElement.clientWidth`：返回不包括滚动条的视口宽度。 示例代码： let viewportWidthWithScrollbar = window.innerWidth; let viewportWidthWithoutScrollbar = document.documentElement.clientWidth; 注意：在CSS中，我们通常使用媒体查询，如`@media (max-width: 600px) { ... }`，但使用JS可以在窗口大小变化时动态获取宽度。 监听窗口变化： window.addEventListener('resize', function() { console.log(window.innerWidth); }); 另外，引用[1]和[3]提到的`document.body.clientWidth`在标准模式下可能不是视口宽度，因为body可能有外边距等。所以不推荐作为视口宽度使用。 关于屏幕分辨率，使用`window.screen.width`，但注意这不是浏览器的宽度，而是整个显示器的宽度。 根据引用[2]，在移动端，布局视口（layout viewport）的宽度通常为980px（默认），但我们可以通过设置viewport元标签来改变它。例如： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 这样设置后，布局视口的宽度就会等于设备宽度（device-width），此时`document.documentElement.clientWidth`就会等于设备独立像素宽度（CSS像素）。 总结回答： 获取屏幕宽度（视口宽度）最常用的是`window.innerWidth`和`document.documentElement.clientWidth`，注意它们之间的区别（是否包含滚动条）。如果需要整个文档的宽度，则使用`document.documentElement.scrollWidth`。 相关问题： 1. 如何获取屏幕高度？ 2. 如何获取设备的像素比（devicePixelRatio）？ 3. 如何在React/Vue中监听窗口大小变化？ 4. 移动端布局视口和视觉视口有什么区别？ 5. 如何设置移动端页面的viewport？ 注意：在回答中引用参考内容，在引用到的句子后面加上引用标记。 </think> 在网页开发中，获取屏幕宽度的方法主要有以下几种，根据使用场景和需求选择合适的方式： ### 一、浏览器环境获取屏幕宽度 1. **获取视口宽度（浏览器可视区域）** ```javascript // 包含滚动条宽度 const widthWithScrollbar = window.innerWidth; // 不包含滚动条宽度（推荐） const clientWidth = document.documentElement.clientWidth || document.body.clientWidth; ``` 2. **获取整个文档宽度（含滚动区域）** ```javascript const fullWidth = Math.max( document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, document.documentElement.offsetWidth ); ``` 3. **获取设备屏幕分辨率宽度** ```javascript const screenWidth = window.screen.width; // 物理像素宽度 ``` 4. **监听窗口尺寸变化** ```javascript window.addEventListener('resize', () => { const currentWidth = window.innerWidth; console.log('当前宽度:', currentWidth); }); ``` ### 二、移动端特殊情况 1. **布局视口 vs 视觉视口** - `document.documentElement.clientWidth` 获取布局视口宽度（默认980px）[^2] - `window.innerWidth` 获取视觉视口宽度（实际显示区域） 2. **添加Viewport Meta标签** 在HTML头部添加使布局视口等于设备宽度： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 添加后 `document.documentElement.clientWidth` 将与设备宽度一致 ### 三、微信小程序环境 ```javascript // 同步获取 const systemInfo = wx.getSystemInfoSync(); const screenWidth = systemInfo.screenWidth; // 异步获取 wx.getSystemInfo({ success: (res) => { const screenWidth = res.screenWidth; } }); ``` ### 四、不同宽度的含义对比 | 方法 | 包含滚动条 | 包含边框 | 包含隐藏区域 | 典型用途 | |------------------------------|-----------|---------|------------|---------------------| | `window.innerWidth` | ✅ | ❌ | ❌ | 响应式布局 | | `document.body.clientWidth` | ❌ | ❌ | ❌ | 内容区域宽度 | | `document.body.offsetWidth` | ❌ | ✅ | ❌ | 元素整体宽度 | | `document.body.scrollWidth` | ❌ | ❌ | ✅ | 包含滚动内容的宽度 | | `window.screen.width` | - | - | - | 设备物理分辨率 | ### 五、最佳实践建议 1. 响应式布局优先使用 `window.innerWidth` + `resize` 监听 2. 移动端务必设置 viewport meta 标签 3. 需要精确计算元素尺寸时使用 `getBoundingClientRect()` 4. 避免在渲染过程中频繁获取，应在 `resize` 事件中缓存结果 ```javascript // 示例：响应式布局处理 function handleResponsive() { const breakpoint = 768; const width = window.innerWidth; if (width < breakpoint) { // 移动端布局 } else { // PC端布局 } } // 初始化 + 监听变化 handleResponsive(); window.addEventListener('resize', handleResponsive); ``` --- ### 相关问题 1. 如何获取移动端设备的像素密度（DPI）？ 2. `clientWidth` 和 `offsetWidth` 有什么区别？ 3. 在React/Vue中如何正确监听窗口大小变化？ 4. 移动端1像素边框问题有哪些解决方案？ 5. 如何通过CSS媒体查询替代JS宽度检测？ [^1]: 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight [^2]: 布局视口（layout viewport）：在PC端上，布局视口等于浏览器窗口的宽度 [^3]: 屏幕分辨率的宽：window.screen.width [^4]: 微信小程序如何获取屏幕宽度：wx.getSystemInfoSync().windowWidth
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值