关于元素大小位置、鼠标位置相关属性的总结

南楼画角 提交于 2019-12-05 01:59:55

元素大小位置相关属性的总结

clientXXX

  • clientLeft
  • clientTop
  • clientWidth 表示内容区域的宽度,包括padding大小,但是不包括边框和滚动条
  • clientHeight 表示内容区域的高度,包括padding大小,但是不包括边框和滚动条

一图胜千言:

再线测试:https://codepen.io/zhaojianxi...

offsetXXX

  • offsetLeft
  • offsetTop
  • offsetWidth
  • offsetHeight
  • offsetParent 往上找非static的第一个定位元素

一图胜千言:

在线测试地址:https://codepen.io/zhaojianxi...

scrollXXX

  • scrollLeft
  • scrollTop
  • scrollWidth
  • scrollHeight

一图胜千言:

在线测试地址:https://codepen.io/zhaojianxi...

鼠标位置

clientX,clientY 相对于window的偏移量
offsetX, offsetY 相对于被点击元素的偏移量
pageX, pageY 相对于document的偏移量
screenX, screenY 鼠标相对于显示器屏幕的偏移坐标(由于是相对于屏幕的。所以在pc端没太多使用场景)
x, y 相当于clientX,clientY

我的GitHub地址:https://github.com/JesseZhao1... 欢迎关注

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!