js中offset、scroll、event、client的区别和使用

发布于 29 天前  2 次阅读


1. 概述

  • offset: 获取元素的实际显示尺寸
  • scroll: 获取滚动后全部尺寸
  • client: 获取不包括滚动条的实际显示尺寸
  • event: 获取鼠标的坐标位置

2. offset

属性说明
offsetWihtwidht + padding + border
offsetHeightHeight + padding + border
offsetRight盒子与有定位的父元素的距离,不包含border,但包含padding,父元素无定位时为body

3. client

属性说明
clientWidth页面可视区域的宽, width + padding
clientHeight页面可视区域的高,height + padding

标准模式
document.documentElement.clientWidth

怪异模式
document.body.clientWidth

4. scroll

属性说明
scrollWidth检测盒子内容的宽, 不包含border
scrollHeight检测盒子的内容的高,不包括border
scrollTop被卷去的上部部分
scrollLeft被卷去的左部部分

5. event

属性说明
bubbles是否为冒泡类型
button鼠标哪一个按钮被点击
pageX/pageY相对body,鼠标的坐标
screenX/screenY相对浏览器,鼠标的坐标
clientX/clientY相对浏览器的可视区域,鼠标的坐标
target事件发生的源头
type事件类型


这个时间很美好,但它也很残酷