Web API 学习笔记 04

元素偏移量offset系列

使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等

• element.offsetParent 获取带有定位的父元素，如果没有返回body
• element.offsetTop 相对于父元素上方的偏移
• element.offsetLeft 相对于父元素左方的偏移
• element.offsetWidth 元素自身宽度，包括padding、边框、内容
• element.offsetHeight 元素自身高度，包括padding、边框和内容

注意offset系列属性与style的区别

• offset可以获取任意样式表中的样式属性，style只能获取行内样式
• offset返回没有px单位，style返回带有px单位的字符串
• offsetWidth(Height) 包括边框和padding，style.width不包括
• offsetWidth等属性是只读属性，style.width是可读写属性

因此，在获取元素大小、位置偏移时通常用offset，设置修改元素大小时用style

元素可视区client系列

• element.clientTop 获取元素上边框的大小
• element.clientLeft 获取元素左边框的大小
• element.clientWidth 元素宽度，包括内容和padding
• element.clientHeight 元素高度，包括内容和padding

元素滚动

• element.scrollTop 元素上方被卷去的大小
• element.scrollLeft 元素左方被卷去的大小
• element.scrollWidth 元素宽度，包括内容和padding，包括被滚动走的部分
• element.scrollHeight 高度，包括被滚动走的部分

页面上方滚去的大小：window.pageYOffset
页面左方滚去的大小：window.pageXOffset
有兼容性问题，ie9+支持
其他表示方法：
如果声明了DTD：document.docuementElement.scrollTop
没有声明DTD：document.body.scrollTop

元素的滚动事件：onscroll