clientHeight、scrollHeight、offsetHeight都是些啥？

2019-08-31 09:35:38 阅读：276 来源： 互联网

标签：clientHeight 元素 father son offsetHeight height border scrollHeight

前段时间写一个自动滚动+鼠标放上去可供滚动的页面功能，被元素的几个属性搞的有点晕乎晕乎的，下决心来搞明白是什么意思，先上示例代码：

<style>
	.father{
		width: 500px;
		height: 400px;
		border: 50px solid blue;
		border-color: red; 
		background: blue;
		overflow: scroll;
	}

	.son{
		height: 800px;
		background: green;
		border: 20px solid #fff;
		padding: 100px;
                margin: 20px;
	}
</style>

<div class="father" id="father">
	<div class="son" id="son">
		<p>这是子节点</p>
		<p>这是子节点</p>
		<p>这是子节点</p>
		<p>这是子节点</p>
		<p>这是子节点</p>
		<p>这是子节点</p>
		<p>这是子节点</p>
		<p>这是子节点</p>
	</div>
</div>

元素的 clientHeight = 元素的height + 元素的padding - 横向滚动条高度（如果有设置 overflow：scroll的话,谷歌浏览器是：6.8px ≈ 7px）

clientHeight(father) = height（father）:400px 
                       + paddingTop(father):0px 
                       + paddingBottom(father):0px 
                       - 横向滚动条高度（father）：7px 
                       = 383px


clientHeight（son） =  height（son）: 800px  
                       +  paddingTop(son):100px 
                       + paddingBottom(son):100px  
                       - 横向滚动条高度（son）：0px 
                       =  1000px

总结：元素的 clientHeight只包括了元素height 和padding,不包括margin 和 border

当内部元素高度大于父元素高度时：

元素的 scrollHeight = 内部元素的clientHeight + 内部元素的margin+ 内部元素的border+ 元素自身的padding

当内部元素高度小于父元素高度时：

元素的 scrollHeight = 元素的 clientHeight

当子元素高度超过父元素高度时：
scrollHeight (father) = clientHeight（son）:1000px 
                       + borderTop(son):20px
                       + borderBottom(son):20px 
                       + marginTop(son):20px 
                       + marginBottom(son):20px 
                       = 1080x

当子元素高度小于父元素高度时：
scrollHeight (father) = clientHeight (father)


scrollHeight （son） =  clientHeight（son） 
                     =  1000px

总结：元素的 scrollHeight 包括了内部元素的盒子高度(height + padding + margin + border)和自身的padding

元素的 offsetHeight = 元素的height + 元素的border+ 元素的 padding

offsetHeight (father) = height（father）:400px 
                       + paddingTop(father):0px 
                       + paddingBottom(father):0px 
                       + borderTop(son):50px
                       + borderBottom(son):50px 
                       = 500px


offsetHeight （son） =  height（son）: 800px  
                       +  paddingTop(son):100px 
                       + paddingBottom(son):100px  
                       + borderTop(son):20px
                       + borderBottom(son):20px  
                       =  1040px

总结：元素的 offsetHeight 只包括了元素height 、padding和border ,但不包括 margin

标签：clientHeight,元素,father,son,offsetHeight,height,border,scrollHeight
来源： https://blog.csdn.net/Ray_20160915/article/details/100148015

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

clientHeight、scrollHeight、offsetHeight都是些啥？