Question

我的JavaScript代码有奇怪的行为。我想通过JavaScript代码获取<div>容器的宽度，但是它没有像chrome / firefox sai的ui一样返回给我同样的大小。我试图通过三种不同的方法来获取特定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测试过，但其他方法应该相似）包括填充和边距值。

例如，假设我们的chrome的div宽度为638px，宽度水平填充为8px，运行clientWidth将得到654。（638 base + 8 padding-left + 8 padding-left）。然后，让我们添加margin-left:10px，现在我们从值中宽松 10px到现在得到644。（638个基数+ 8个左填充边+ 8个右填充边-10个空白边）

有帮助吗？

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

与浏览器用户界面相比，ClientWidth和offsetWidth返回不同的值

1 个答案: