关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究
我是以chrome瀏覽器做的研究。
先看一段代碼：
<script>window.addEventListener('DOMContentLoaded',function(){var node1 = document.querySelector('#father');var node2 = document.querySelector('#child');console.log('offsetTop==offsetHeight==scrollTop==scrollHeight==clientHeight');console.log('father: '+node1.offsetTop+'=='+node1.offsetHeight+'=='+node1.scrollTop+'=='+node1.scrollHeight+'=='+node1.clientHeight);console.log('child: '+node2.offsetTop+'=='+node2.offsetHeight+'=='+node2.scrollTop+'=='+node2.scrollHeight+'=='+node2.clientHeight);/**offsetTop:是本元素距上層元素且元素設置了postion=relative的距離，如果所有父級元素都沒有設置postion。就是距body的距離。計算：offsetTop = margin+topoffsetHeight:是本元素底部到本元素頂部的距離。計算：offsetHeight = content+padding+borderscrollTop:是瀏覽器可視窗口頂端距頁面頂部的距離。計算： 無scrollHeight: 是容器內所有元素及子元素的高度之和，如果沒有子元素，即為自身高度+padding。計算： 有子元素：包括所有子元素的(content+padding+border+margin)之和無子元素：content+paddingclientHeight: 是自身容器的高度。除去滾動條的寬度。計算： content.height+padding-滾動條的寬度*/}); </script> </head> <body><div style="position:relative;" id="superFather"><div style="width:500px;height:1000px;background:red;overflow:auto;" id="father"><!-- <div style="width:500px;height:500px;background:green;padding:10px;margin:60px;border:5px solid #2EE008; opacity:0.5;position:absolute;top:50px;" id="child"></div> --><div style="width:800px;height:500px;background:green;padding:10px;margin:60px;border:5px solid #2EE008; opacity:0.5;" id="child"></div><div style="width:800px;height:500px;background:green;padding:10px;margin:60px;border:5px solid #2EE008; opacity:0.5;" id="child"></div><div style="width:800px;height:500px;background:green;padding:10px;margin:60px;border:5px solid #2EE008; opacity:0.5;" id="child"></div></div> </div></body>?
所以，根據上面的解釋輸出結果為：
offsetTop: ?farther=0,child = margin(60)
offsetHeight: farther = content(1000),child = content(500)+padding(20)+border(10)
scrollTop: 0,0
scrollHeight: farther=500*3+60*4+20*3+10*3,500+10*2
clientHeight: 100-17,500+10*2
所以整體輸出：
?
總結一下算法：
offsetHeight:content+padding+border
offsetTop: margin+top
scrollHeight/clientHeight: 子元素沒有超出情況下：content+padding 只是clientHeight在有滾動條的情況下，是要去除滾動條寬度。子元素超出之后：所有子元素的(content+padding+border+margin)之和
scrollTop:瀏覽器可視區域頂部到頁面頂部的距離
?參考鏈接：http://www.softwhy.com/forum.php?mod=viewthread&tid=8298
轉載于:https://www.cnblogs.com/freefish12/p/5568043.html
總結
以上是生活随笔為你收集整理的关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [AngularJS学习笔记] 基础学习
- 下一篇： PAT天梯赛练习题——L3-005. 垃