时间戳

首页 > 解决方案 > 与浏览器 ui 相比，Clientwidth 和 offsetWidth 返回不同的值

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

问题描述

我的 javascript 代码有一个奇怪的行为。我想<div>通过 javascript 代码获取容器的宽度，但它不会像 chrome/firefox sais 的 ui 那样返回相同的大小。我尝试以三种不同的方式获取特定 div 容器的宽度： 1. Width .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>

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

标签： javascriptjquerywidth

解决方案

JS 方法（我测试过.clientWidth，.clientHeight但其他应该类似）包括填充和边距值。

例如，我们在 chrome 中的 div 宽度为 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。

推荐阅读