offsetWidth、clientWidth、scrollWidth等一系列属性及其方法一直都傻傻分不清

同学你好，对于你的问题解答如下：

1、offsetWidth：返回元素的实际宽度，由元素的边框border、内边距padding和宽度width值组成。

2、clientWidth：返回元素内部的宽度，元素的内边距padding和宽度width值组成，如果存在滚动条，则不包含滚动条的宽度

3、scrollWidth：返回元素里面内容的实际宽度（包括由于overflow溢出而在屏幕上不可见的内容），包含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）

具体结合下图代码测试理解：

​

同学可以在MDN官网上搜索查看属性对应的详细解释，并写一写代码，结合代码实现的效果自己再总结下，这样更有更有利于同学对这些属性的区分与记忆，也方便后期复习时查找。

祝学习愉快~