JS | JS之深入理解客户区尺寸client系列属性

目录

一、客户区大小

clientHeight

clientWidth

clientLeft

clientTop

二、页面大小

三、注意事项

---

关于元素尺寸，一般地，有偏移大小offset、客户区大小client和滚动大小scroll。前文已经介绍过偏移属性，后文将介绍scroll滚动大小，本文主要介绍客户区大小client。

一、客户区大小

客户区大小client指的是元素内容及其内边距所占据的空间大小

clientHeight

clientHeight属性返回元素节点的客户区高度

element.clientHeight = padding-top + height + padding-bottom

包含padding 不包含 border 和 margin以及水平滚动条的高度 

clientWidth

clientWidth属性返回元素节点的客户区宽度

element.clientWidth = padding-left + width + padding-right

包含padding 不包含 border 和 margin以及垂直滚动条的宽度 

clientWidth / clientHeight示例：

<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;"></div>
<script>
//120(10+100+10)
console.log(test.clientHeight);
console.log(test.clientWidth);
</script>

注意：滚动条宽度不计算在内

<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;overflow:scroll"></div>
<script>
//103(120-17)，滚动条宽度为17px