示例
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: #f1f1f1;
}
#container {
width: 300px;
height: 200px;
padding: 20px;
margin: 30px;
border: 5px solid #ccc;
box-sizing: border-box;
overflow: auto;
background-color: #fff;
}
#content {
width: 600px;
height: 500px;
display: inline-block;
background-color: #f1f1f1;
}
</style>
<body>
<p>offsetHeight</p>
<div id="container">
<!--<div id="content">
<p>offHeight scrollHeight clientHeight 区别</p>
</div>-->
</div>
</body>
<script>
const container = document.getElementById('container')
console.log('offsetWidth', container.offsetWidth)
console.log('offsetHeight', container.offsetHeight)
console.log('clientWidth', container.clientWidth)
console.log('clientHeight', container.clientHeight)
console.log('scrollWidth', container.scrollWidth)
console.log('scrollHeight', container.scrollHeight)
</script>
计算规则
-
offsetHeight offsetWidth：border + padding + content
代码中如果注释content盒子，那么输出为：
1）offsetWidth = 5 * 2 + 20 * 2 + 250 = 300（content 为250是因为设置了
box-sizing: border-box
，因此offsetHeight实则为container盒子的宽度）
2）offsetHeight = 5 * 2 + 20 * 2 + 150 = 200（分析同上）
-
clientHeight clientWidth：padding + content
代码中如果注释content盒子，那么输出为：
1）clientWidth = 20 * 2 + 250 = 290（比 offsetWidth 少一个边框宽度）
2）clientHeight = 20 * 2 + 150 = 190（分析同上）
-
scrollHeight scrollWidth：padding + 实际内容尺寸
代码中如果注释content盒子，那么输出为：
1）scrollWidth = clientWidth
2）scrollHeight = clientHeight
代码中如果不注释content盒子，那么输出为：
1）scrollWidth = 20 * 2 + 600 = 640（600为 content 盒子的宽度）
2）scrollHeight = 20 * 2 + 500 = 540 （500为 content 盒子的长度）
![Java经典面试题详解：带你手撸红黑树总结[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)