为什么我的clientWidth和offsetWidth相等？

Question

var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);

#div1 {
  height: 5000px;
  width: 5000px;
  background-color: #000000;
}

<div id="mydiv">
  <div id="div1"></div>
</div>

我在网页上有一个div，其中的内容需要垂直滚动条。我正在尝试使用javascript计算offsetWidth和clientWidth，以便最终可以计算出垂直滚动条的宽度，但显然它们是相等的。我有：

html：

<div id="mydiv">
  <div id="div1"></div>
</div>

css：

#div1 {
  height: 5000px;
  width: 5000px;
  background-color: #000000;
}

js：

var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);

Answer 1

clientWidth和offsetWidth之间的主要区别：

（1） clientWidth 是内部宽度（即元素内部的空间，包括填充，但不包括边框和滚动条）

（2） offsetWidth 是外部宽度（即元素所占用的空间，包括填充和边框）

正如我在CSS边框中看到的那样，缺少滚动条，这就是为什么两种情况下宽度都相同的原因。

我已经更新了CSS，现在您将获得不同的值。请检查以下代码段：

var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);

#mydiv {
        padding: 20px;
        border: 20px solid red;
      }

<div id="mydiv">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
  </div>

Answer 2

看看这两个代码段，可以看到带滚动条和不带滚动条的区别。

var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);

#div1 {
  height: 100px;
  width: 200px;
  background-color: #000000;
}
#mydiv{
  height:80px;
  width:160px;
  overflow:scroll
}

<div id="mydiv">
  <div id="div1"></div>
</div>

以下代码段没有滚动条和溢出，因此客户端宽度和偏移宽度相同

var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);

#div1 {
  height: 100px;
  width: 200px;
  background-color: purple;
}

<div id="mydiv">
  <div id="div1"></div>
</div>