1 

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);
4

2 回答 2

1

看一下这两个片段，你可以看到有滚动条和没有滚动条的区别。

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>

于 2020-02-18T05:58:53.030 回答
1

clientWidth 和 offsetWidth 的主要区别：

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

（2）offsetWidth为外宽（即元素占用的空间，包括padding和borders）

正如我在您的 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>

于 2020-02-18T04:52:19.987 回答