clientHeight,offsetHeight,scrollHeight迷一样的三个值

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