摘要：和是一个只读属性，返回元素的内部宽度，该属性包括内边距，但不包括垂直滚动条如果有边框和外边距。一个典型的是测量包含元素的边框水平线上的内边距竖直方向滚动条如果有的话以及设置的宽度值。
clientWidth和offsetWidth clientWidth
是一个只读属性，返回元素的内部宽度，该属性包括内边距，但不包括垂直滚动条(如果有)、边框和外边距。
offsetWidth是一个只读属性，返回一个元素的布局宽度。一个典型的offsetWidth是测量包含元素的边框、水平线上的内边距、竖直方向滚动条(如果有的话)、以及CSS设置的宽度(width)值。
用法：var offsetWidth = element.offsetWidth;
Document
当我们给上面parent元素加上边框内边距时：
#parent {
width: 200px;
height: 200px;
background-color: red;
border: 10px solid black;
padding: 10px;
}
输出结果为：
// 220
// 240
现在我们给parent加一个子元素，并让滚动条出现，完整代码如下：
Document
显示结果如图：
输出信息如下：
// 205
// 240
对于上述代码作个简要说明，clientWidth值为205是这样计算来的：原本我们设置parent的宽度为200,因为我们设置了父元素overflow:scroll属性出现滚动条后，滚动条宽度被包括在这个设置的宽度之内。chrome浏览器滚动条默认宽度为15，所以parent宽度就只剩185.按照上面clientWidth定义来计算，clientWidth = 185(实际width) + 10(padding) + 10(padding).
未完待续
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/51947.html
摘要：表示元素可见课件内容的高度，包括以下几部分可见内容包括的高度，隐藏内容由于存在垂直滚动条不被包括。 1. window下的宽高 获取高度可以可以省略window window.innerWidth，通过字面意思我们知道这是一个内部的宽度，如果有滚动条，则包含滚动条的宽度 window.innerHeight，表示内部可用的高度，如果有滚动条，则包含滚动条的高度 window.o...
摘要：容易混淆上来不说话，先抛出几个问题是时候谈谈它们之间的区别了，是不是已经混乱了好吧，一步一步来搞清楚这些东西是啥。要搞清这几个容易混淆的概念，我的建议是运行文章中的例子。和类似于和，不同的是不包含边框大小。 容易混淆client-*,scroll-*,offset-* Truth comes from practice 上来不说话，先抛出几个问题： offsetWidth offs...
摘要：容易混淆上来不说话，先抛出几个问题是时候谈谈它们之间的区别了，是不是已经混乱了好吧，一步一步来搞清楚这些东西是啥。要搞清这几个容易混淆的概念，我的建议是运行文章中的例子。和类似于和，不同的是不包含边框大小。 容易混淆client-*,scroll-*,offset-* Truth comes from practice 上来不说话，先抛出几个问题： offsetWidth offs...
阅读 3077·2021-02-22 17:12
阅读 679·2019-08-30 15:55
阅读 3014·2019-08-30 15:54
阅读 1359·2019-08-29 16:56
阅读 1845·2019-08-29 15:13
阅读 1683·2019-08-29 13:19
阅读 578·2019-08-26 13:40
阅读 2797·2019-08-26 10:26
