宽度之争：clientWidth、offsetWidth、scrollWidth傻傻分不清楚？

2024-01-19 20:33:04

在网页开发中，我们经常会遇到需要获取元素宽度的场景。这时，我们可能会用到clientWidth、offsetWidth、scrollWidth这三个属性。然而，这三个属性之间存在着一些细微的差异，如果不加以区分，很可能会导致错误的结果。

1. 定义

clientWidth： 它是元素内容的宽度，不包括边框、滚动条和填充。
offsetWidth： 它是元素的总宽度，包括边框和填充，但不包括滚动条。
scrollWidth： 它是元素的滚动宽度，包括元素内容、边框、填充和滚动条。

2. 差异

从定义中可以看出，clientWidth、offsetWidth、scrollWidth这三个属性之间存在着以下差异：

clientWidth： 不包括边框、滚动条和填充。
offsetWidth： 包括边框和填充，但不包括滚动条。
scrollWidth： 包括元素内容、边框、填充和滚动条。

3. 应用场景

根据不同的应用场景，我们可以选择使用不同的属性来获取元素的宽度。

clientWidth： 当我们需要获取元素内容的宽度时，可以使用clientWidth。例如，如果我们要计算一个文本框的内容宽度，就可以使用clientWidth。
offsetWidth： 当我们需要获取元素的总宽度时，可以使用offsetWidth。例如，如果我们要计算一个元素的总宽度，包括边框和填充，就可以使用offsetWidth。
scrollWidth： 当我们需要获取元素的滚动宽度时，可以使用scrollWidth。例如，如果我们要计算一个元素的滚动宽度，包括元素内容、边框、填充和滚动条，就可以使用scrollWidth。

4. 实例

为了更好地理解clientWidth、offsetWidth、scrollWidth这三个属性之间的差异，我们来看一个示例。

<div id="box">
  <p>Hello World!</p>
</div>

const box = document.getElementById("box");

console.log("clientWidth:", box.clientWidth); // 100
console.log("offsetWidth:", box.offsetWidth); // 120
console.log("scrollWidth:", box.scrollWidth); // 100