前言
最近发现对offset、client、scroll几个属性的区别忘了,所以这篇总结一下元素Element和事件对象event中几个属性的区别
Element
这些属性都是只读的,还有一个建议是不要频繁读取这些属性,这是一个耗性能的操作。
属性名 | 含义 |
---|---|
offsetWidth | 元素自身可视宽度加上border的宽度 |
offsetHeight | height+上下padding+上下border |
offsetTop | 如果父元素有定位,则上边框到父级上边框的距离,父元素没定位,则到body顶部的距离 |
offsetLeft | 如果父元素有定位,则左边框到父级左边框的距离,父元素没定位,则到body左边的距离 |
clientWidth | width+左右padding |
clientHeight | height+上下padding |
clientTop | border.top(上边框的宽度) |
clientLeft | border.left(左边框的宽度) |
scrollWidth | 可视区宽度+被隐藏区域宽度 |
scrollHeight | 可视区高度+被隐藏区域高度 |
scrollTop | 元素已滚动的高度 |
scrollLeft | 元素已滚动的宽度 |
Event
属性名 | 含义 |
---|---|
clientX/clientY | 点击位置距离当前body可视区域的x、y坐标 |
screenX/screenY | 点击位置距离当前电脑屏幕的x、y坐标 |
pageX/pageY | 相对于整个页面,包括被卷去的宽高度 |
结语
大概就这些了,冲冲冲!