在Web开发中，我们经常需要获取和操作DOM元素的宽度属性。这些属性各有特点，适用场景也不同。下面我将详细讲解这6种宽度获取方式的区别和用法。

1.dom.style.width

最简单直接获取元素宽度的方法，但有几个限制：

o 只能获取内联样式中的width值
o 不会返回计算后的实际像素值
o 如果样式表或默认样式设置了宽度，无法通过此方式获取

<div id="box1" style="width: 200px"></div>

<script>
const box = document.getElementById('box1');
console.log(box.style.width); // "200px"
console.log(box.style.height); // "" (因为没有内联样式)
</script>

2.getComputedStyle(dom).width

获取元素计算后的样式值（包括所有CSS来源的样式）。

o 返回计算后的实际像素值（带'px'单位字符串）
o 会考虑所有CSS规则（内联、样式表、继承等）

<style>
#box2 {
  width: 300px;
}
</style>
<div id="box2"></div>

<script>
const box2 = document.getElementById('box2');
const computedStyle = window.getComputedStyle(box2);
console.log(computedStyle.width); // "300px"
</script>

3.dom.clientWidth

获取元素的可视宽度（内容区 + padding，不含滚动条、border和margin）：

o 返回数值（像素整数）
o 包含padding但不包含滚动条宽度
o 对于内联元素返回0

<style>
#box3 {
  width: 400px;
  padding: 20px;
  border: 5px solid #333;
  margin: 10px;
  overflow: auto;
}
</style>
<div id="box3">内容内容内容内容内容</div>

<script>
const box3 = document.getElementById('box3');
console.log(box3.clientWidth); // 440 (400 + 20*2)
</script>

4.dom.offsetWidth

获取元素的布局宽度（内容区 + padding + border + 滚动条）：

o 返回数值（像素整数）
o 包含padding、border和垂直滚动条宽度（如果有）
o 对于隐藏元素（display: none）返回0

<div id="box4" style="width: 500px; padding: 20px; border: 5px solid #333;"></div>

<script>
const box4 = document.getElementById('box4');
console.log(box4.offsetWidth); // 550 (500 + 20*2 + 5*2)
</script>

5.dom.scrollWidth

获取元素的滚动内容宽度（不考虑可视区域）：

o 返回数值（像素整数）
o 包含由于overflow隐藏的内容宽度
o 如果没有水平滚动条，返回clientWidth

<style>
#box5 {
  width: 200px;
  height: 100px;
  overflow-x: auto;
}
#content {
  width: 500px;
}
</style>
<div id="box5">
  <div id="content">超长内容超长内容超长内容超长内容</div>
</div>

<script>
const box5 = document.getElementById('box5');
console.log(box5.scrollWidth); // 500 (内容实际宽度)
console.log(box5.clientWidth); // 200 (可视区域宽度)
</script>

6.dom.getBoundingClientRect().width

获取元素的边界框宽度（考虑transform等CSS变换）：

o 返回数值（像素浮点数）
o 包含padding、border、但会受transform缩放影响
o 是相对于视口的测量值

<style>
#box6 {
  width: 200px;
  padding: 10px;
  border: 5px solid #333;
  transform: scale(1.5);
}
</style>
<div id="box6"></div>

<script>
const box6 = document.getElementById('box6');
const rect = box6.getBoundingClientRect();
console.log(rect.width); // 330 (220 * 1.5)
console.log(box6.offsetWidth); // 220 (200 + 10*2 + 5*2)
</script>

总结对比表

属性/方法返回值类型包含内容是否受CSS变换影响特殊情况style.width字符串仅内联样式设定的width否无内联样式时返回空getComputedStyle().width带"px"字符串内容区实际宽度否始终返回带单位的值clientWidth整数像素内容+padding否内联元素返回0offsetWidth整数像素内容+padding+border+滚动条否display:none返回0scrollWidth整数像素整个内容宽度(含隐藏)否无溢出时=clientWidthgetBoundingClientRect().width浮点数像素边界框实际宽度是受transform影响

根据实际需求选择合适的宽度获取方式，在响应式布局和动画处理中尤为关键。

柏虎资源网

专注编程学习，Python、Java、C++ 教程、案例及资源

详解DOM元素宽度相关属性_dom 属性