元素尺寸的获取方式及区别

1. 从 dom.style 中获取

此方式获取的是 dom 元素的 style 属性里的内容，类似于dom.style.width、dom.style.height。

比如，在页面上渲染了一个类样式中设置了 width/height 的 div 元素，

此时在浏览器控制台中获取 dom.style.width 则是空字符串 ''，因为我们没有给该元素添加 style 属性。

同样的，如果我们直接给该元素 style.width 设置为 auto，那么我们获取的就是 auto，

另外，此方式获取的值并不表示元素实际的尺寸。比如，给一个行盒设置了 width。那么此时尽管通过 dom.style.width 获取到设置的值，但是元素实际上的宽度仍然是 0。

需要注意，如果设置的 style 中属性的值是非法的，那么则会返回默认值

2. 从 getComputedStyle 中获取

window.getComputedStyle() 返回的是综合元素所有样式（如：内部样式、外部样式、行内样式）之后计算出来的 对应样式属性 值，此时的值对应的是：浏览器渲染步骤的第二步样式计算。

比如，以下元素通过 getComputedStyle 获取的 width 值就是100px。

xml 复制代码

<style>
  .item {
    width: 100px !important;
    height: 100px;
  }
</style>
<div class="item" style="width: 500px;"></div>

好，既然此方式对应的是样式计算步骤所得的值，那么getComputedStyle 所返回的值一定是带有单位，且单位是 绝对单位。

比如，以下元素通过 getComputedStyle 获取的值就是32px，而不是 2em。

xml 复制代码

<style>
  .item {
    width: 2em !important;
    height: 100px;
  }
</style>
<div class="item" style="width: 5em"></div>

另外，getComputedStyle 获取的也可能不是元素实际的尺寸。

比如，给行内元素设置宽高：

3. 元素的 offsetWidth、clientWidth、scrollWidth

此方式，获取的是元素在布局树中的信息。

比如以下 div#root 元素 getComputedStyle 的 width 则仍然是100px，而 clientWidth 则是120（包含了 padding 的值）

xml 复制代码

<style>
  .item {
    width: 100px !important;
    height: 100px;
    border: 1px solid yellow;
    padding: 10px;
  }
</style>
<div id="root" class="item" style="width: 500px"></div>

需要注意，此时所得出的值已经是一个数字了，不带任何单位。

Tips：

elem.clientWidth是指内容区的宽度 + 内边距的宽度，对于内联元素以及没有 css 样式的元素为 0；

elem.offsetWidth是指内容区的宽度 + 内边距的宽度 + 边框的宽度 + 滚动条的宽度；

4. 元素的 getBoundingClientRect() 返回值

getBoundingClientRect 返回的是元素的视觉尺寸。

比如，元素通过 transform 放大 2 倍，那么 getBoundingClientRect 返回的 width 则也放大了两倍

xml 复制代码

<style>
  .item {
    width: 100px !important;
    height: 100px;
    border: 1px solid yellow;
    padding: 10px;
    transform: scale(2);
  }
</style>
<div id="root" class="item" style="width: 500px"></div>