html 元素位置信息总结

来源：互联网发布：php 图片加水印编辑：程序博客网时间：2024/04/30 02:56

1. offsetLeft，offsetTop 描述的是相对于有效父元素的位置，这里之所以说有效父元素，是因为一个元素的定位不一定相对于其直接父类，假设当前元素采用 absolute 定位，其位置是相对于其最近的非 static 定位的元素，即沿着 dom 树向上查找，找到第一个非 static 元素（dom 属性 offSetParent 指向该值），这个元素的左上角，就是当前元素的位置坐标原点。

2. offsetWidth，offsetHeight 描述的是元素可视的尺寸，不含 margin，含有 css 中元素的 padding 和 width 和h eight 的值，即盒式模型中去除 margin 后的部分。

3. scrollHeight，scrollWidth 描述的是当元素有 scroll 属性时，其所包含内容的尺寸，类似 scroll view 中内容的尺寸

4. scrollLeft, scrollTop 一般此值与 offsetLeft，offsetTop相同，当前元素如果有 scroll 属性时，此值才可能有变化，当内容滚动时，scrollLeft, scrollTop 表示当前显示视口相对于内容尺寸的位置

scroll width，height

+- - - - - - - - - - - - - - - - -+

| scroll(left, top) | <---------------------------- scroll （滚动）的内容

+------------------------+

| | | <----|------------------------------ html element （例如有 scroll 属性的 div）

| |

| +------------------------+ |

offset width height

| |

+- - - - - - - - - - - - - - - - - - - - - - -+

0 0