时间戳

首页 > 解决方案 > 基于 Chromium 的浏览器中的奇怪 JavaScript 错误

javascript - 基于 Chromium 的浏览器中的奇怪 JavaScript 错误

问题描述

对于学校练习，我正在尝试使用 Javascript 增加按钮的宽度。

这是我的代码：

const button = document.querySelector("button");

button.addEventListener("click", () => {
  console.log(button.offsetWidth);
  button.style.width = button.offsetWidth + 1 + "px";
});
<button>Press me!</button>

由于某种原因，单击 3 次后宽度停止增加。这只发生在基于 Chromium 的浏览器（Chrome、Edge、Brave）中。更奇怪的是，代码在我另一台运行完全相同版本的 Chrome 和 Edge 的笔记本电脑上运行良好。在 Firefox 和 IE9 中，它也可以正常工作。我试过清理我的缓存，甚至安装了一个新的浏览器（Vivaldi），它有同样的问题。我正在运行 Windows 10 版本 1909 版本 18363.1256。对于 Chrome，我使用的是 87.0.4280.88 版本、Brave 版本 87.0.664.66 和 Edge 版本 87.0.664.66。

标签： javascripthtmlgoogle-chromemicrosoft-edgechromium

解决方案

使用函数 getBoundingClientRect() 解决了这个问题。

const button = document.querySelector("button");

button.addEventListener("click", () => {
  console.log(button.getBoundingClientRect().width);
  button.style.width = button.getBoundingClientRect().width + 1 + "px";
});
<button>Press me!</button>

推荐阅读