每天10个前端知识点：各种宽高距离篇

个人博客已上线，欢迎前去访问评论！
无媛无故 - wangchloe的个人博客

---

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

---

1. 滚动距离

html简写：document.documentElement

• document.body.scrollTop
  兼容：Chrome
  其他 -> 0
• document.documentElement.scrollTop
  兼容：IE、FF
  其他 -> 0

兼容写法
纵向：var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
横向：var scrollL = document.documentElement.scrollLeft || document.body.scrollLeft;

2. 滚动高度

obj.scrollHeight

• 内容高度 > 盒模型高度 取内容高度
• 盒模型高度 > 内容高度 取盒模型高度

3. 可视区高度

• 可视区高度：var clientH = document.documentElement.clientHeight;
• 可视区宽度：var clientW = document.documentElement.clientWidth;

兼容：全兼容

4. 物体高度

获取的是盒模型大小 = width/height + padding + border;

• 物体的高度：var oH = obj.offsetHeight;
• 物体的宽度：var oW = obj.offsetWidth;

注意：offsetWidth/height只有append进body后才有，创建时获取不到盒模型的大小。

5. offsetHeight && getStyle()

	offsetHeight	getStyle()
返回值	数字	字符串
获取值	获取的是盒模型的大小(width/height+padding+border)	获取的是纯width/height
display:none后	0	仍可以获取

6. 物体的相对距离

• 物体距离定位父级左边距离：var oL = obj.offsetLeft;
• 物体距离定位父级上边距离：var oT = obj.offsetTop;

7. 关于父级

• 结构父级 obj.parentNode 根：document
• 定位父级 obj.offsetParent 根：body

8. 封装一个物体距离左边/上边的绝对位置的函数

<script>
    function getPos(obj) {
        var l = 0;  // 距离左边的绝对距离
        var t = 0;  // 距离上边的绝对距离
        while(obj) {
            l += obj.offsetLeft;
            t += obj.offsetTop;
            obj = obj.offsetParent; // 继续查找上一层定位父级
        }

        return {left: l, top: t};
    }
</script>

---

更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！

公众号是坚持日更的，不发文的时候推送一些我觉得好用的前端网站或者看到的一些问题的解决方案，也更便于大家交流，就酱。

微信公众号：无媛无故