昨天写了clientWidth,今天趁热打铁，把offsetWidth也学习一下。

先看一下mdn是怎么解释的：

HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的（译者注：各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。

可以看出与clientWidth一致的是，它也是属性，并且是只读的。包括了border，padding，竖直方向上的滚动条（如果有的话），以及css设置的宽度（width）。

同样先来看一个例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box {
        width: 200px;
        height: 200px;
        padding: 20px;
        margin: 20px;
        border: solid 10px black;
      }
    </style>
  </head>
  <body>
    <div id="box">content</div>
  </body>
  <script>
    var box = document.getElementById('box');
    console.log(box.offsetWidth);
  </script>
</html>

alt

这时offsetWidth为260。把box-sizing设置成border-box,再次观察

alt

这时offsetWidth为200,又到了总结的时候

  1. 相较于clientWidth，offsetWidth包括了border，滚动条。
  2. content-box下为width + 左右padding + 左右border+滚动条（如果有）
  3. border-box下为css设置的width