style.height 包括 元素的滾動條,不包括邊框
clientHeight 不包括元素的滾動條和邊框,只有在沒有元素的滾動條的情況下,style.height相等于clientHeight
offsetHeight 包括元素的滾動條和邊框,只有在沒有元素的滾動條和邊框的情況下,offsetHeight==style.height==clientHeight
scrollHeight offsetHeight+scrollTop,只有在沒有元素的滾動條和邊框和滾動時的情況下,offsetHeight==style.height==clientHeight==,offsetHeight==style.height==scrollHeight
?公式是:
?style.height=clientHeight+滾動條寬度;
?offsetHeight=style.height+borderTop+borderBottom;
?scrollHeight=offsetHeight+scrollTop;

同理: clientWidth,offsetWidthstyle.width,scrollWidth
演示時營造不同的環境測試(改變eyejs元素的樣式)
<div id="eyejs" style="border: solid 10px red;width:100px;height:100px;overflow:scroll;">
<div style="height:200px;"></div>
</div>
<input type="button" οnclick="alert(document.getElementById('eyejs').clientHeight)" value="點擊clientHeight" />
<input type="button" οnclick="alert(document.getElementById('eyejs').style.height)" value="點擊style.height" />
<input type="button" οnclick="alert(document.getElementById('eyejs').offsetHeight)" value="點擊offsetHeight" />
<input type="button" οnclick="alert(document.getElementById('eyejs').scrollHeight)" value="點擊scrollHeight" />

總結

以上是生活随笔為你收集整理的clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。