Javascript中常用宽高和坐标属性

1.scrollHeight/Width

scrollHeight/Width是一个只读的属性,元素的内容高度/宽度,包括由于overflow属性而不可见的部分。不能直接从css中得到。scrollHeight/Width的值除了内容高度/宽度,也包括padding值
scrollWidth类似。
Javascript中常用宽高和坐标属性_第1张图片

2.scrollTop/Left

scrollLeft为例:
scrollLeft属性能够得到或者设置元素滚动到左边的像素值。注意(rtl和ltr会不同)

  • 假如element不能够scroll的时候,比如没有设置overflow属性。scrollLeft会被重置为0,不管你设置什么值,都不会有什么效果。(这也是很多scrollLeft失效的原因)

  • 设置的值小于0,重置为0

  • 设置的值超过内容允许滚动的最大值,重置为最大值。

注意事项:scrollLeft属性是应用在父元素上面,而不是子元素。
其它scrollTop与scrollLeft类似。

3. offsetHeight/Width

offsetHeight/Width是一个只读属性,返回一个元素的结构宽度,包括元素的border和padding、滚动条(如果存在的话)和css设置的高度/宽度。

Javascript中常用宽高和坐标属性_第2张图片

4.offsetTop/Left

offsetLeft为例, 返回当前元素左上角相对于HTMLElement.offsetParent节点的左边界偏移的像素值。

HTMLElement.offsetParent:一个只读属性,返回一个指向最近的包含该元素的定位元素。如果没有定位的元素,则 offsetParent 为最近的 table 元素或根元素(标准模式下为 html;quirks 模式下为 body)。当元素的 style.display 设置为 "none" 时,offsetParent 返回 null。offsetParent 很有用,因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。

例如:

Short span. Long span that wraps within this div.

offsetTop 类似的道理。

5.clientWidth/Height

clientWidth/Height是一个只读属性,对于没有css或者内联元素,其值为0。它包括内部的宽度和高度和padding,但不包括滚动条、border和margin。
Javascript中常用宽高和坐标属性_第3张图片

6.clientTop/Left

clientTop/Left指的是一个元素顶部/左边框的宽度。

7. 区别

摘自stackoverflow的一幅图,可以很好地看到之间的区别:

Javascript中常用宽高和坐标属性_第4张图片

8.clientX/Y

clientX/Y属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平/竖直坐标,不包括滚动条滚动才能显示的区域。定位的依据为浏览器窗口内容区域的左上角

9.offsetX/Y(experimental technology)

offsetX/Y 设置或者是得到鼠标相对于目标事件的父元素的内边界在X/Y坐标上的位置

10.screenX/Y

screenX/Y 相对于物理屏幕/监视器的左上角,只有你增加或减少显示器的数量或分辨率,参考点才会移动。

11.pageX/Y

pageX/Y 相对于整个渲染页面的左上角(包括通过滚动隐藏的部分),简单来说就是元素。

Javascript中常用宽高和坐标属性_第5张图片

参考资料

1.Element.scrollHeight
2.Element.scrollLeft
3.HTMLElement.offsetWidth
4.HTMLElement.offsetParent
5.HTMLElement.offsetLeft
6.Element.clientHeight
7.Element.clientTop
8.Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively

你可能感兴趣的:(盒模型,javascript)