参考文章：https://segmentfault.com/a/1190000002545307
1、对原生的元素属性的理解
clientWidth = padding*2 + width
clientHeight = padding*2 + height
clientLeft = border
clientTop = border
offsetParent 指的是当前元素离自己最近的具有定位的父级元素
offsetWidth = (padding+border)*2 + width
offsetHeight = (padding+border)*2 + height
offsetLeft = 距离offsetParent左边距离
offsetTop = 距离offsetParent上边距离
scrollTop 获取元素中的内容 超出 元素上边界的那部分高度
scrollLeft 获取元素中的内容 超出 元素左边界的那部分宽度
scrollHeight 获取元素的完整高度（不包括border）
scrollWidth 获取元素的完整宽度（不包括border）
除了scrollTop和scrollLeft可读可写，其余的只读
以上返回的值均不带单位
2、obj.style.* 属性
它只能获取该元素的行内样式，而并不能获取到该元素最终计算好的样式
使用obj.currentStyle（IE）和getComputerStyle（IE之外的其他浏览器）
返回的值为带单位的字符串
function getStyle(obj, attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
3、Event对象
在js中，对于元素的运动操作通常都会涉及到event对象，而event对象也存在很多位置属性，且由于浏览器兼容性问题会导致这些属性间相互混淆！
-
clientX和clientY，这对属性是当事件后，鼠标点击位置相对于浏览器（可视区）的坐标，从浏览器的左上角（0，0）开始计算鼠标点击位置距离其左上角的位置。
-
screenX和screenY是事件发生时鼠标相对于屏幕的坐标，以设备屏幕的左上角为原点，事件发生时鼠标点击的地方即为改点的screenX和screenY值。相对于屏幕，而又是浏览器。
-
offsetX和offsetY，这对属性是当事件时，鼠标点击位置相对于该事件源（不包含border）的位置，即点击该div，以该div为原点来计算鼠标点击位置的坐标（注：firefox不支持该属性，firefox中与此属性对应的概念是，event.layerX和event.layerY，所以要使用该属性时，需要做兼容性处理）
var divX = event.offsetX || event.layerX;
- pageX和pageY，该属性是事件发生时鼠标点击位置相对于页面的位置，通常浏览器窗口还没有出现滚动条时，该属性和clientX和clientY是等价的，但是当浏览器出现滚动条时，pageX通常会大于clientX，因为页面还存在被卷起来的部分的宽度和高度。即pageX和pageY是相对于整个页面的位置
网友评论