关于前端:Js-offsetWidth

昨天写了 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>

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

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

相较于 clientWidth，offsetWidth 包含了 border，滚动条。

content-box下为width + 左右 padding + 左右 border+ 滚动条（如果有）

border-box下为 css 设置的width