目录
关于元素尺寸,一般地,有偏移大小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