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

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