JavaScript中clientWidth,offsetWidth,scrollWidth的区别

当我们在开发使用JavaScript的时候，可能需要获取元素的尺寸信息，在这样的情况下，clientWidth、offsetWidth和scrollWidth这三个属性经常被用来获取元素的宽度。但是，这三个属性在不同的情况下所代表的含义是不同的，下面我们详细讲解它们的差异。

1. clientWidth

clientWidth是一个只读属性，它返回的是元素的内部宽度（不含边框）。当元素的box-sizing属性值为content-box时，该元素的clientWidth属性值只包含元素的内边距和内容的宽度；当元素的box-sizing属性值为border-box时，clientWidth值即为元素的内容、内边距和边框的宽度之和。

示例1：假如我们有一个元素div，它使用了content-box作为box-sizing属性值，我们可以通过以下方式获取div元素的宽度和高度

<div id="myDiv" style="width: 200px; height: 100px; border: 2px solid black; padding: 10px;">
    myDiv content
</div>

const myDiv = document.getElementById("myDiv");
const clientWidth = myDiv.clientWidth;
const clientHeight = myDiv.clientHeight;
console.log(`clientWidth: ${clientWidth}, clientHeight: ${clientHeight}`);

输出结果：

clientWidth: 220, clientHeight: 120

由于div元素的宽度为200px，内边距为10px，边框为2px，因此最终clientWidth为220。需要注意的是，获取clientWidth属性时，属性值并不包括水平滚动条。

2. offsetWidth

offsetWidth属性也是一个只读属性，它返回的是元素的布局尺寸，包括了元素的边框、内边距和内容宽度。offsetWidth属性值包含了滚动条、边框和内边距，但不包括外边距。

示例2：我们再来看一段代码，这次我们给div元素一个水平滚动条，并把box-sizing属性值设置为border-box

<div id="myDiv2" style="width: 200px; height: 100px; border: 2px solid black; padding: 10px; overflow-x: scroll;">
    <div style="width: 400px; height: 100px;">
        myDiv content
    </div>
</div>

const myDiv2 = document.getElementById("myDiv2");
const offsetWidth = myDiv2.offsetWidth;
console.log(`offsetWidth: ${offsetWidth}`);

输出结果：

offsetWidth: 224

可以看到，在这个例子中，由于div元素的宽度只有200px，但是因为它包含一个400px的子元素，并且有一个水平滚动条，因此最终的offsetWidth属性值为224。

3. scrollWidth

scrollWidth属性是一个只读属性，它代表的是元素的滚动宽度。scrollWidth值包括元素内部内容的实际宽度和最后面隐藏超出内容的空白部分的宽度。 scrollWidth属性值通常可以用来确定是否需要添加水平滚动条。

示例3：我们再来看一个例子，这次我们设置子元素的宽度为800px，然后再给div元素一个水平滚动条。并且这次我们使用JavaScript来获取元素的scrollWidth属性值。

<div id="myDiv3" style="width: 200px; height: 100px; border: 2px solid black; padding: 10px; overflow-x: scroll;">
    <div style="width: 800px; height: 100px;">
        myDiv content
    </div>
</div>

const myDiv3 = document.getElementById("myDiv3");
const scrollWidth = myDiv3.scrollWidth;
console.log(`scrollWidth: ${scrollWidth}`);

输出结果：

scrollWidth: 800

可以看到，在这个例子中，即使div元素的宽度值只有200px，但是因为它内部子元素的宽度为800px，因此滚动宽度的属性值为800。

综上所述，clientWidth、offsetWidth和scrollWidth这三个属性都可以用来获取元素的宽度，但是它们所代表的含义是不同的，需要根据实际情况进行使用。