javascript中各种宽高、间距总结

一、DOM对象

1、只读属性

（1）clientWidth、clientHeight： padding + content ( - scroll宽度 )
（2）offsetWidth、offsetHeight：padding + content + border
（3）clientTop、clientLeft：border的top、border的left
（4）offsetTop、offsetLeft：相对于其offsetParent上边距离、左边距离
概念：offsetParent是指一直往上找，第一个具有定位的父级元素
（5）scrollWidth、scrollHeight：padding + content + 不在可视区域的部分

2、可读可写属性

（1）scrollTop、scrollLeft：已经被卷上去或移到左边 看不到的部分
（2）dom.style.xxx：注意：该值只能得到设置的内联样式的值，实际计算后展示的值需要通过window.getComputedStyle($0)（非IE）或 dom.currentstyle 获得

二、Event事件

以下属性的获取：event.xx

（1）clientX、clientY：事件发生时，鼠标距离浏览器左上角(0,0)的距离
（2）screenX、screenY：事件发生时，鼠标距离屏幕左上角的距离
（3）offsetX、offsetY：事件发生时，鼠标距离该dom左上角的距离
（4）pageX、pageY：事件发生时，鼠标距离页面左上角的距离。若未出现滚动条，则与clientX、clientY相等

以上内容参考JavaScript中的各种宽高以及位置总结