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次后宽度停止增加。这种情况只发生在基于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，版本是870.664.66。

Answer 1

使用函数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>