元素的大小和滚动

Yang2025年1月10日大约 3 分钟

offsetParent

获取最接近的祖先元素，在浏览器渲染期间，它被用于计算坐标
当我们创建了一个元素，但尚未将其插入文档中，或者它（或它的祖先）具有 display:none 时，offsetParent 为 null，并且 offsetWidth 和 offsetHeight 为 0

<div id="div" style="position: relative;">
  <span id="span">Test</span>
</div>
<script>
  var oSpan = document.getElementById('span')
  console.log(oSpan.offsetParent) // <div id="div" style="position: relative;">…</div>
</script>

最近的祖先元素为下列之一
- CSS 定位的 position 为 relative、absolute、 fixed
- 或 <body>
- 或 <table>、<th>、 <td>
以下几种情况，offsetParent 的值为 null
- 对于未显示的元素（display:none 或者不在文档中）
- 对于 <body> 与 <html>
- 对于带有 position:fixed 的元素

offsetLeft

相对于 offsetParent 元素左上角的 x 坐标

offsetTop

相对于 offsetParent 元素左上角的 y 坐标

offsetWidth

表示元素本身的宽度 = boder + padding + width

offsetHeight

表示元素本身的高度 = border + padding + height

clientLeft

表示内侧与外侧的相对的 x 坐标（边框加滚动条宽度）

clientTop

表示内侧与外侧的相对的 y 坐标（边框加滚动条宽度）

clientWidth

元素边框内区域的宽度 = content width + padding （不包括滚动条宽度）

clientHeight

元素边框内区域的宽度 = content height + padding （不包括滚动条高度）

scrollWidth

元素完整内部宽度，包括滚动出的部分（不包括滚动条宽度）

scrollHeight

元素区域的完整内部高度，包括滚动出的部分（不包括滚动条高度）

scrollLeft

元素水平方向滚动距离，是可修改的，并且浏览器会滚动该元素

scrollTop

元素垂直方向滚动距离，是可修改的，并且浏览器会滚动该元素

getBoundingClientRect()

返回最小矩形的窗口坐标，该矩形将 elem 作为内建 DOMRect 类的对象，返回属性如下

x：矩形原点相对于窗口的 X 坐标
y：矩形原点相对于窗口的 Y 坐标
width：矩形的宽度（可以为负）
height：矩形的高度（可以为负）
top：矩形顶部的 Y 坐标
bottom：矩形底部的 Y 坐标
left：矩形左边缘的 X 坐标
right：矩形右边缘的 X 坐标

注意

坐标可能是小数
坐标可能是负数。例如滚动页面，使 elem 现在位于窗口的上方，则 elem.getBoundingClientRect().top 为负数
负的 width/height 值表示矩形从其右下角开始，然后向左上方“增长”
由于历史原因，IE 浏览器不支持 x/y 属性

CSS width 与 clientWidth 的不同点

getComputedStyle(elem).width 与 elem.clientWidth

clientWidth 值是数值，而 getComputedStyle(elem).width 返回一个以 px 作为后缀的字符串。
getComputedStyle 可能会返回非数值的 width，例如内联（inline）元素的 "auto"。
clientWidth 是元素的内部内容区域加上 padding，而 CSS width（具有标准的 box-sizing）是内部内容区域，不包括 padding。
如果有滚动条，并且浏览器为其保留了空间，那么某些浏览器会从 CSS width 中减去该空间（因为它不再可用于内容），而有些则不会这样做。clientWidth 属性总是相同的：如果为滚动条保留了空间，那么将减去滚动条的大小。