与浏览器ui相比，Clientwidth和offsetWidth返回不同的值

Question

我的javascript代码有一个奇怪的行为。我想通过javascript代码获取<div>容器的宽度，但它不会像我的chrome / firefox sai那样返回相同的大小。我尝试以三种不同的方式获取特定div容器的宽度：1。宽度.offsetWidth 2.宽度getBoundingClientRect（）函数3.使用jquery和width（）

所有三个都给了我相同的背面，但浏览器显示我不同的宽度。我通过右键单击浏览器宽度 - >检查元素 - >将鼠标悬停在特定元素上，它将显示px宽度。

例如，浏览器div宽度为971px，javascript宽度返回761px。这里有什么问题？

我在下面有实际的代码（但不知道如何正确使用它:(）。

let container = document.getElementById('container');


let offsetWidth = container.offsetWidth;
let boundingWidth = container.getBoundingClientRect().width
let jqueryWidth = $('#container').width();

.container {
  display: flex;
  flex-flow: column nowrap;
}

.rows {
  display: block;
  position: relative;
  overflow: auto hidden;
  height: 60px;
}

<div id="container" className={styles.container}>
    <div className={styles.rows}> {/* Here is some code */}</div>
</div>

我希望你能帮助我，如果你需要任何进一步的信息，请告诉我。

Answer 1

JS方法（我使用.clientWidth和.clientHeight进行了测试，但其他方法应该相似）包括填充和边距值。

比方说，我们的铬宽度为638px，宽度水平填充为8px，运行clientWidth将产生654.（638 base + 8 padding-left + 8 padding-left）。然后，让我们添加margin-left:10px，我们现在从我们的值松散10px到现在得到644.（638 base + 8 padding-left + 8 padding-right - 10 margin-left）

这有帮助吗？

编辑：您可以像我一样在Chrome检查器中自行测试。使用Chrome控制台轻松运行本地JS。