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

同理: clientWidth,offsetWidthstyle.width,scrollWidth
演示時(shí)營(yíng)造不同的環(huán)境測(cè)試(改變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="點(diǎn)擊clientHeight" />
<input type="button" οnclick="alert(document.getElementById('eyejs').style.height)" value="點(diǎn)擊style.height" />
<input type="button" οnclick="alert(document.getElementById('eyejs').offsetHeight)" value="點(diǎn)擊offsetHeight" />
<input type="button" οnclick="alert(document.getElementById('eyejs').scrollHeight)" value="點(diǎn)擊scrollHeight" />

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。