offset / scroll / client Left / Top

1.offsetHeight / Width （只读）

　　offsetHeight：表示该元素在垂直方向占用的空间大小，包含元素的高度+上边框高度+下边框高度

　　offsetWidth：表示该元素在水平方向占用的空间大小，包含元素的宽度+左边框宽度+右边框宽度

2.clientHeight / clientWidth （只读）

　　clientHeight：元素内容区的高度+元素内边距的高度

　　clientWidth：元素内容区的宽度+元素内边距的宽度

　　clientWidth = width + padding
　　offsetWidth = width + padding + border = client + border

　　注：该元素未设置：box-sizing：border-box

3.scrollHeight / scrollWidth

　　无滚动条的情况下，与client相似，但不同浏览器有不同的差别

　　在滚动条存在的情况下，等于client + 滚动条所蜷缩的高度或宽度

总结：

　　在确定文档的总高度时，必须取得scrollWidth / clientWidth 和 scrollHeight / clientHeight 中的最大值，才能保证跨浏览器的环境下得到精确的结果

　var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);

　var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);

　　注意：在混杂模式下的IE，需要用document.body代替document.documentElement

4.scrollTop / scrollLeft

　　获取滚动条滚动的距离

5.offsetLeft / offsetTop （只读，并且没有单位）

　　offsetLeft ：元素的左外边框至包含元素的左内边框之间的像素距离

　　offsetTop ：元素的上外边框至包含元素的上内边框之间的像素距离

　　只能通过style.left / top来修改

巴特西

offset / scroll / client Left / Top

最新文章

热门文章