时间戳

首页 > 解决方案 > 为什么我的 clientWidth 和 offsetWidth 相等？

javascript - 为什么我的 clientWidth 和 offsetWidth 相等？

问题描述

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

标签： javascripthtmlcssoffsetwidth

解决方案

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

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>

推荐阅读