js 元素宽高、位置计算总结

DOM对象

只读属性

1. clientWidth、clientHeight：指的是元素的可视部分宽度和高度，即padding+content，如果没有滚动条，即为元素设定的高度和宽度，如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高（即不包含border及滚动条宽高）
2. offsetWidth、offsetHeight：指的是元素的border+padding+content的宽度和高度，该属性和其内部的内容是否超出元素大小无关，只和本来设定的border以及width和height有关（即包含border及滚动条宽高）
3. scrollWidth、scrollHeight：指的是当元素内部的内容超出其宽度和高度的时候，元素内容的实际宽度和高度，需要注意的是，当元素其中内容没有超过其高度或者宽度的时候，该属性值与clientWidth、clientHeight等价
4. clientLeft、clientTop：用来读取元素的border的宽度和高度的
5. offsetLeft、offsetTop：说到这对属性就需要说下offsetParent,所谓offsetParent指的是当前元素的离自己最近的具有定位的（position不为static）父级元素（不仅仅指的是直接父级元素，只要是它的父元素都可以），该父级元素就是当前元素的offsetParent，如果从该元素向上寻找，找不到这样一个父级元素，那么当前元素的offsetParent就是body元素。而offsetLeft和offsetTop指的是当前元素，相对于其offsetParent左边距离和上边距离，即当前元素的border到包含它的offsetParent的border的距离

读写属性

1. scrollLeft、scrollTop：指的是当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度
2. el.style.*：style对象的任意属性都是可读写的，如left、top、width、height，它只能够获取到该元素的行内样式，而并不能获取到该元素最终计算好的样式，这就是在读取属性值的时候和上述只读属性的区别，要获取计算好的样式，请使用obj.currentstyle（IE）和getComputedStyle(IE之外的浏览器)，同时，给这些属性赋值的时候需要带单位的要带上单位，否则不生效。

Event对象

1. clientX、clientY：是当事件发生时，鼠标点击位置相对于浏览器（可视区）的坐标，即浏览器左上角坐标的（0,0），该属性以浏览器左上角坐标为原点，计算鼠标点击位置距离其左上角的位置，不管浏览器窗口大小如何变化，都不会影响点击位置的坐标
2. pageX、pageY：是事件发生时鼠标点击位置相对于页面的位置，通常浏览器窗口没有出现滚动条时，该属性和event.clientX及event.clientY是等价的，但是当浏览器出现滚动条的时候，pageX通常会大于clientX，因为页面还存在被卷起来的部分的宽度和高度
3. screenX、screenY：是事件发生时鼠标相对于屏幕的坐标，以设备屏幕的左上角为原点，事件发生时鼠标点击的地方即为该点的screenX和screenY值
4. offsetX、offsetY：是指当事件发生时，鼠标点击位置相对于该事件源节点padding边的位置，不包括border，即点击该div，以该div的padding左上角为原点来计算鼠标点击位置的坐标

参考：https://www.cnblogs.com/myzhibie/p/4256164.html