JS中盒模型相关

JS中盒模型相关

1 offset

· offsetTop: 当前元素离<定位父级>元素顶部的距离；

· offsetLeft: 当前元素离<定位父级>元素左边的距离；

以上两个属性如果没定位的父级，则相对于根元素html的距离。

· offsetWidth: 当前元素的宽度（border + padding + content）；

· offsetHeight: 当前元素的高度（border + padding + content）。

拓展

e.offsetX,e.offsetY：鼠标在当事件源对象中的偏移量。

2 client

· clientTop: 当前元素上边框的宽度（border-top）

· clientLeft: 当前元素左边框的宽度（border-left）

· clientWidth: 当前元素宽度（padding + content，不包括border）

· clientHeight: 当前元素高度（padding + content，不包括border）

拓展

e.clientX,e.clientY:鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标）

3 scroll

· scrollTop: 当前元素<垂直滚动条>滚动过的距离

· scrollLeft: 当前元素<水平滚动条>滚动过的距离

· scrollWidth: 当前元素滚动宽度（不包括边框）

· scrollHeight: 当前元素滚动高度（不包括边框）

PS: scrollWidth,scrollHeight浏览器间有兼容性问题