相关属性介绍
都要结合鼠标事件监听使用
1、client相关属性
获取鼠标位置
鼠标相对于视口的位置
e.clientX
e.clientY
(e是鼠标对象)
获取节点尺寸
节点.clientWidth;
节点.clientHeight;
(返回值为数值)
clientWidth
= content宽度 + 左padding + 右padding(即:实际尺寸 不含border和margin,不论是什么盒模型)
clientHeight
= content高度 + 左padding + 右padding (即:实际尺寸 不含border和margin,不论是什么盒模型)
获取边框宽度
clientTop
= 上边框的宽度
clientLeft
= 左边框的宽度
2、offset相关属性
获取鼠标位置
鼠标相对于事件源的位置
e.offsetX
e.offsetY
(如果鼠标事件为mousemove,则移到子节点时变成相对于子节点的位置)
获取节点尺寸
节点.offsetWidth;
节点.offsetHeight;
(返回值为数值)
offsetWidth
= content宽度 + 左padding + 右padding + 左boder + 右boder
offsetHeight
= content高度 + 左padding + 右padding + 左boder + 右boder
offsetTop
:当前节点的 上边框外边缘 到最近的已定位父级(offsetParent) 上边框内边缘 的距离。
offsetLeft
:当前元素 左边框外边缘 到最近的已定位父级(offsetParent) 左边框内边缘 的距离。
offsetParent
:获取离当前元素最近的已定位父级(即:position有以下属性值之一:relative absolute fixed),如果父级都没有定位,则获取的为body节点
区别
clientX/clientY 的位置是鼠标相对于整个视口的左上角的位置
offsetX/offsetY 的位置是鼠标相对于事件源(即鼠标所停留在的那个节点)的左上角的位置
clientWidth/clientHeight 的尺寸是节点不包含border宽度和margin的尺寸,不论是什么盒模型都不包含
offsetWidth/offsetHeight 的尺寸是节点不包含margin的尺寸
区别图如下