js中各种宽高以及位置总结

只读属性

1.clientHeight与clientWidth

指的是元素的可见宽高,padding+content

注意：如果出现滚动条，就需要减去滚动条的宽度或者高度

例如：元素宽高都是200px;overflow:auto;当内容超出会出现垂直滚动条，这时clientWidth就会小于200px;

 

2.offsetHeight和offsetWidth

指的是元素border+padding+content,与超出滚动条无关

 

3.clientTop和clientLeft

这一对属性是用来读取元素的border的宽度和高度的

 

4.offsetLeft和offsetTop

offsetParent指的是当前元素的离自己最近的具有定位的父级元素，如果从该元素向上寻找，找不到这样一个父级元素，那么当前元素的offsetParent就是body元素。offsetLeft和offsetTop指的是当前元素相对于其offsetParent左边和上边的距离，即当前元素的border到包含它的offsetParent的border的距离

 

5.scrollWidth和scrollHeight

当元素内部内容超出其宽度和高度的时候，元素内部内容的实际宽度和高度(会受到滚动条宽高的影响)

注意：当元素其中内容没有超过其高度或者宽度的时候，该属性是取不到的

可读写属性

6.scrollTop和scrollLeft

元素中的内容超出其宽高的时候，元素被卷起的高度和宽度，没有滚动条即为0

 

7.Event对象

clientX和clientY

鼠标点击位置相对于浏览器(可视区)的左边，即浏览器左上角左边的（0，0）；该属性以浏览器左上角坐标为原点，计算鼠标点击位置距离其左上角的位置，不管浏览器窗口大小如何变化，都不会影响点击位置的坐标

 

screenX和screenY

鼠标相对于屏幕的坐标，以设备屏幕的左上角为原点，事件发生时鼠标点击的地方即为该点的screenX和screenY的值

 

offsetX和offsetY

鼠标点击位置相对于该事件源的位置，即点击该div，以该div左上角为原点来计算鼠标点击位置的坐标（IE,chorme,opera都支持该属性，Firefox不支持（event.layerX和event.layerY来兼容））

 

pageX和pageY

鼠标点击位置相对于页面的位置，通常浏览器窗口没有出现滚动条时，该属性和clientX及clientY等价，但是当浏览器出现滚动条时，pageX通常会大于clientX，因为页面还存在被卷起来的部分的宽度和高度