<think>我们被要求使用JavaScript获取DOM元素的
宽度和
高度。根据引用[1][2][3]，我们知道有多种获取DOM元素的方法。但这里我们需要的是获取已获取到的元素的尺寸（
宽度和
高度）。
在JavaScript中，获取DOM元素的尺寸有多种方式，主要取决于需要获取的尺寸是否包含边框、内边距等。以下是常用的属性和方法：
1
. **offsetWidth 和 offsetHeight**：
- 返回元素的布局
宽度和
高度，包括内容、内边距(padding)和边框(border)，但不包括外边距(margin)。
- 返回值是整数（单位像素）。
2
. **
clientWidth 和
clientHeight**：
- 返回元素内部
宽度和
高度，包括内容(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]
本文介绍了一种解决网页内容撑不满一屏时，通过修改html与body标签样式来准确获取整个网页高度的方法。当使用document.body.clientHeight及document.body.clientWidth时可能会遇到尺寸不准确的问题，文章提供了解决方案。
扫一扫
637
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
