js中的各种获取元素宽高以及位置属性总结

dom对象

只读属性

clientWidth和clientHeight

元素的部分内容宽高,即：padding+content,如果没有滚动条，就是元素的宽高，如果有滚动条，则要减去滚动条的宽高！！

offsetWidth和offsetHeight

这是 padding+content+border的宽高，与有无滚动条无关，之和元素本神的宽高有关

clientTop和clientLeft

这是用来读取元素border的宽高

offsetLeft和offsetTop

从该元素的祖先类元素中找Position属性不为static的那个元素，没有找到那就是Body。offsetLeft和offsetTop就是距离找到的祖先类元素左上角的left和top

scrollHeight和scrollWidth

当元素内容超出该元素宽高出现滚动条时，scrollHeight和scrollWidth代表的就是该元素内容的实际宽高，单没有超出时，这两个属性是取不到值的

---

scrollTop和scrollLeft

指的是元素内的内容卷起的宽高！是可读可写的。

---

event 对象

clientX和clientY

相对于浏览器左上角的位置的坐标点

offestX和offsetY

相对于事件源的位置，比如点击div，则相对于div的左上角的坐标点

creenX和screenY

相对于屏幕左上角的位置的坐标点

pageY和pageX

相对与页面左上角的位置，如果没有出现滚动条，那就和clientX,clientY一样，如果出现滚动条，那就要吧被卷起的宽高减去，才能获得 clientX和clientY的效果