js中各种位置

js中有各种与位置相关的属性,每次看到的时候都各种懵逼。索性一次总结一下。

clientHeight

内容可视区域的高度。包括padding不包括border、水平滚动条、margin。对于inline的元素这个属性一直是0，单位px，只读元素。

offsetHeight

offsetHeight = clientHeight + border + 滚动条。对于inline的元素，这个属性一直是0，单位px，只读元素。

scrollHieght

当子元素的高度比本元素高,且overflow不等于hidden时,scrollHeight就是网页实际内容的高度。包括可视区域和被滚动条隐藏的区域。

clientWidth

offsetWidth scrollWidth

同height

clientTop

元素上边框的厚度,当没有指定时,一般为0

offsetTop

元素距离父元素顶端的高度

scrollTop

滚动条被隐藏部分的高度,一般用来计算向下滚动多少像素

clientLeft

offsetLeft scrollLeft

同top

event.clientX

event.clientY

相对于窗口可视区域的X,Y坐标,可视区域不包括工具栏和滚动条。

event.pageX

event.pageY

类似于event.pageX、event.pageY,但他们使用的是文档坐标而非窗口坐标。这两个属性不是标准属性，但得到广泛支持。

event.pageX = event.clientX + 横向滚动条距离。

event.offsetX

event.offsetY

鼠标相对于事件源元素(target)的X,Y坐标，只有IE事件有这两个属性，标准事件没有对应的属性

screenX

screenY

鼠标相对于用户显示器左上角的X,Y坐标。标准事件和IE事件都定义了这两个属性