https://blog.csdn.net/qq_39083004/article/details/78498178

https://www.imooc.com/article/17571? 推薦

?

?

offsetLeft

一個元素的offsetLeft值，就是這個元素左邊框外，到自己的offsetParent對象的左邊框內的距離

?

?

?

?什么是offsetParent對象？

?每一個元素，天生都有一個屬性，叫做offsetParent，表示自己的“偏移參考盒子”，我們不稱呼中文，就叫offsetParent。這個offsetParent是誰呢？

就是自己祖先元素中，離自己最近的已經定位的元素，如果自己的祖先元素中，沒有任何盒子進行了定位，那么offsetParent對象就是body。

?op.offsetParent? ??

無論這個盒子自己是否定位，自己的offsetParent就是按照上述方法尋找。

?

?總結：

?	IE6、7	IE8	IE9、IE9+、高級瀏覽器
offsetParent	如果自己沒有定位，那么就是自己父親中有width或者有height或者有定位的元素。 如果自己有定位，那么就是和高級瀏覽器一致。	和高級瀏覽器一致	自己祖先元素中，離自己最近的已經定位的元素
offsetLeft	和高級瀏覽器一致	多算一條border	自己的border外到offsetParet對象的border內

?

?offsetWidth和offsetHeight

?

全線兼容，是自己的屬性，和別的盒子無關。

一個盒子的offsetWidth值就是自己的 width+左右padding+左右border的寬度

如果盒子沒有寬度，那么所有瀏覽器都將把px值當做offsetWidth，而不是100%；

如果盒子沒有高度，用文字撐的，所有瀏覽器都將把px值當做offsetHeight

?

clientWidth和clientHeight

?

全線兼容，就一丟丟IE6的問題

client表示“客戶端”這里就是一個名字而已，不用在意這個名字。

clientWidth就是自己的width+padding的值。 也就是說，比offsetWidth少了border。

如果盒子沒有寬度，那么那么所有瀏覽器都將把px值當做clientWidth，而不是100%

如果盒子沒有高度，用文字撐的，IE6 clientHeight是0，其他瀏覽器都是數值。

?

卷動值scrollTop

頁面的卷動值$(window).scrollTop();

窗口的高度$(window).height();

頁面的總高度$(document).height();

?

頁面的卷動值有一個范圍：[0 , $(document).height() - $(window).height()];

也就是說，$(window).scrollTop() / ($(document).height() - $(window).height())一定是[0,1]。

?

?

?

轉載于:https://www.cnblogs.com/coder-lzh/p/10885474.html

總結

以上是生活随笔為你收集整理的clientHeight,offsetHeight,scrollHeight迷一样的三个值的全部內容，希望文章能夠幫你解決所遇到的問題。

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