offset client scroll

1.offset系列

• offsetParent 用于获取定位的父级元素
• offsetLeft 距离定位父元素的左偏移量
• offsetTop 距离定位父元素的上偏移量
• offsetWidth 当前元素的宽度   (内容宽度+padding+边框)
• offsetHeight 当前元素的高度

offsetParent和parentNode的区别?

• offsetParent 返回的是离自己最近的定位父元素
• parentNode 返回的是直接父元素

2.client系列

• clientWidth 元素可视区的宽度 (内容宽度+padding)
• clientHeight 元素可视区的高度

3.scroll系列

• scrollLeft 元素中内容左侧滚动出去的距离
• scrollTop 元素中内容顶部滚动出去的距离
• scrollWidth 元素中内容的宽度
• scrollHeight 元素中内容的高度

 

小结:

• offset, client, scroll系列返回的都是数字类型(Number)
• 返回的值是所有样式渲染到页面上的最终结果

4. 获取浏览器可视区的大小

• window.innerWidth 浏览器可视区的宽度
• window.innerHeight 浏览器可视区的高度

5.获取页面滚动出去的距离

• window.pageYOffset 顶部滚动出去的距离
• window.pageXOffset 左侧滚动出去的距离

 

client系列其他

- clientLeft 返回元素左边框的宽度

- clientTop 返回元素上边框的宽度