网页宽高clientWidth clientHeight获得数值不对的问题

本文介绍了一种解决网页内容撑不满一屏时,通过修改html与body标签样式来准确获取整个网页高度的方法。当使用document.body.clientHeight及document.body.clientWidth时可能会遇到尺寸不准确的问题,文章提供了解决方案。

当网页内容撑不满一屏时,通过以下代码获得整个网页高度会有问题

document.body.clientHeight;
document.body.clientWidth;

得到的宽高不对,可能是因为html与body标签缺一个样式:height:100%

设置如下:
        html{
            height: 100%;
            overflow: hidden;//overflow去掉滚动条
        }

        body{
            height: 100%;
        }    

 

转载于:https://www.cnblogs.com/hamsterPP/p/5664162.html

<think>我们被要求使用JavaScript获取DOM元素的度和度。根据引用[1][2][3],我们知道有多种获取DOM元素的方法。但这里我们需要的是获取已获取到的元素的尺寸(度和度)。 在JavaScript中,获取DOM元素的尺寸有多种方式,主要取决于需要获取的尺寸是否包含边框、内边距等。以下是常用的属性和方法: 1. **offsetWidth 和 offsetHeight**: - 返回元素的布局度和度,包括内容、内边距(padding)和边框(border),但不包括外边距(margin)。 - 返回值是整数(单位像素)。 2. **clientWidthclientHeight**: - 返回元素内部度和度,包括内容(content)和内边距(padding),但不包括边框(border)、滚动条和外边距(margin)。 - 如果元素有滚动条,clientWidth/clientHeight会减去滚动条的度。 3. **getBoundingClientRect()**: - 返回一个DOMRect对象,包含元素的位置和尺寸信息(相对于视口)。 - 该对象包含以下属性:`width`, `height`, `x`, `y`, `left`, `top`, `right`, `bottom`。 - 注意:`width`和`height`是元素的整体尺寸,包括内边距、边框,但不包括外边距。 - 返回的尺寸是浮点数,可以包含小数(例如在缩放时)。 4. **style.width 和 style.height**: - 只能获取通过内联样式(即元素标签的style属性)设置的度和度,不能获取样式表设置的尺寸。 - 通常不推荐使用,因为获取的可能是空字符串(如果没有内联样式的话)。 5. **window.getComputedStyle()**: - 返回一个包含元素所有计算样式(包括样式表和内联样式)的对象。 - 可以通过这个对象获取元素的度和度(字符串形式,如"100px"),需要转换为数字。 - 注意:这个方法获取的是CSS定义的度和度,不包括内边距、边框等(即box-sizing的影响)。它返回的是CSS属性值,可能是`auto`,所以不一定有用。 根据需求,我们通常使用前三种方法之一。 ### 示例代码 假设我们有一个DOM元素,我们想获取它的尺寸: ```javascript // 获取元素 const element = document.getElementById('myElement'); // 使用引用[1]中的方法 // 方法1: offsetWidth/offsetHeight const width1 = element.offsetWidth; const height1 = element.offsetHeight; // 方法2: clientWidth/clientHeight const width2 = element.clientWidth; const height2 = element.clientHeight; // 方法3: getBoundingClientRect() const rect = element.getBoundingClientRect(); const width3 = rect.width; // 等同于 rect.right - rect.left const height3 = rect.height; // 等同于 rect.bottom - rect.top ``` ### 注意事项 - **何时使用哪种方法?** - 如果需要包含边框和内边距,使用`offsetWidth`/`offsetHeight`。 - 如果只需要内容+内边距(不包含边框),使用`clientWidth`/`clientHeight`。 - 如果需要精确的浮点数值或相对于视口的位置,使用`getBoundingClientRect()`。 - **隐藏元素**:如果元素是隐藏的(例如`display: none`),那么上述方法返回的尺寸都是0。 - **回流(Reflow)**:获取元素尺寸会强制浏览器进行回流(重新计算布局),频繁使用可能影响性能,尤其是在循环中。 ### 兼容性 以上方法在现代浏览器中都有很好的支持,包括IE8及以上。 ### 获取包含外边距的尺寸 如果需要获取包含外边距的尺寸,可以通过计算: ```javascript const style = window.getComputedStyle(element); const marginLeft = parseFloat(style.marginLeft); const marginRight = parseFloat(style.marginRight); const marginTop = parseFloat(style.marginTop); const marginBottom = parseFloat(style.marginBottom); // 总度(包含外边距) const totalWidth = element.offsetWidth + marginLeft + marginRight; // 总度(包含外边距) const totalHeight = element.offsetHeight + marginTop + marginBottom; ``` ### 总结 根据需求选择合适的尺寸获取方法。对于大多数情况,`offsetWidth`/`offsetHeight`和`getBoundingClientRect()`是最常用的。 §§相关问题§§ 1. 如何获取DOM元素相对于整个文档的位置? 2. `offsetWidth`和`getBoundingClientRect().width`有什么区别? 3. 如何获取元素的内容度(不包括内边距和边框)? 4. 在元素隐藏(display:none)的情况下如何获取其尺寸? 5. 如何避免在循环中多次获取元素尺寸导致的性能问题?</think>### JavaScript 获取 DOM 元素尺寸方法详解 在 JavaScript 中,获取 DOM 元素的尺寸有以下几种常用方法: #### 1. **offsetWidth / offsetHeight** ```javascript const element = document.getElementById('myElement'); const width = element.offsetWidth; // 包含内容+内边距+边框+滚动条 const height = element.offsetHeight; ``` - **返回值**:整数(像素值) - **包含内容**:内容 + 内边距(padding) + 边框(border) + 滚动条(如有) - **不包含**:外边距(margin) - **特点**:最常用的尺寸获取方式[^3] #### 2. **clientWidth / clientHeight** ```javascript const width = element.clientWidth; // 包含内容+内边距(不含边框) const height = element.clientHeight; ``` - **包含内容**:内容 + 内边距(padding) - **不包含**:边框(border)、滚动条、外边距(margin) - **适用场景**:获取可视内容区域尺寸[^1] #### 3. **getBoundingClientRect()** ```javascript const rect = element.getBoundingClientRect(); console.log(rect.width, rect.height); // 包含内容+内边距+边框 console.log(rect.left, rect.top); // 相对于视口的位置 ``` - **返回值**:DOMRect 对象(包含浮点数值) - **包含内容**:内容 + 内边距 + 边框 - **额外信息**:提供元素相对于视口的位置坐标(left, top, right, bottom) #### 4. **window.getComputedStyle()** ```javascript const style = window.getComputedStyle(element); const width = parseFloat(style.width); // 仅内容度(不含内边距/边框) const height = parseFloat(style.height); ``` - **返回值**:字符串(需转换为数值) - **包含内容**:仅 CSS 定义的度/度(受 box-sizing 影响) - **注意事项**:返回带单位字符串(如 "100px"),需用 parseFloat 转换[^2] ### 尺寸获取对比表 | 方法 | 包含内容 | 是否含边框 | 是否含滚动条 | 返回值类型 | |---------------------|--------------------------|------------|--------------|--------------| | offsetWidth/Height | 内容+内边距+边框 | ✓ | ✓ | 整数(像素) | | clientWidth/Height | 内容+内边距 | ✗ | ✗ | 整数(像素) | | getBoundingClientRect | 内容+内边距+边框 | ✓ | ✗ | 浮点数(像素) | | getComputedStyle | CSS定义尺寸(box-sizing)| 取决于CSS | ✗ | 字符串 | ### 使用示例 ```html <div id="box" style="width: 200px; padding: 20px; border: 5px solid; margin: 30px"> 内容区域 </div> <script> const box = document.getElementById('box'); console.log("offsetWidth:", box.offsetWidth); // 200 + 20*2 + 5*2 = 250 console.log("clientWidth:", box.clientWidth); // 200 + 20*2 = 240 console.log("getBoundingClientRect:", box.getBoundingClientRect().width); // 250 </script> ``` ### 注意事项 1. **隐藏元素**:如果元素设置了 `display: none`,所有方法都返回 0 2. **性能考虑**:频繁获取尺寸会导致浏览器重排(reflow),应避免在循环中使用 3. **单位转换**:`getComputedStyle` 返回带单位字符串,需用 `parseFloat()` 转换 4. **边框包含**:`offsetWidth` 和 `getBoundingClientRect()` 包含边框尺寸[^1] > 提示:对于响应式布局,建议结合 `ResizeObserver` API 监听尺寸变化[^3]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值