每天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)
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>

---

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