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

Question

作为一个学校练习，我尝试使用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次后宽度停止增加。这只发生在基于Chrome的浏览器中（Chrome、Edge、Brave）。更奇怪的是，代码在我的另一台运行完全相同版本的Chrome和Edge的笔记本电脑上运行良好。在Firefox和IE9中，它也可以正常工作。我试着清理我的缓存，甚至安装了一个新的浏览器（Vivaldi），它也有同样的问题。我正在运行Windows 10版本1909 build 18363.1256。对于Chrome，我的版本是87.0.4280.88，Brave是87.0.664.66，Edge是87.0.664.66。

Answer 1

使用函数getBoundingClientRect（）修复了该问题。

js lang-js prettyprint-override">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>