刷新 CSS 样式?(重绘页面）

Refresh CSS styles? (Repaint page)

本文关键字：CSS 样式 刷新      更新时间：2023-09-26

这是我遇到的一个奇怪的问题。我一直在用Cordova（Phonegap）开发一个应用程序，许多元素的样式取决于我在body上设置的类。例如

.gray .background{
    background: gray;
}
.gray .title{
    color: white;
}

当我这样做时

document.body.classList.add("gray");

页面上的所有样式都应更改为"新"样式。但是，我测试过的一种设备表现得很奇怪。样式没有更新，但是通过JS对类进行一些记录，我知道该类已被添加。由于某种原因，风格保持不变。这并不总是发生，有时确实发生，有时行为正确。

那么，有没有办法手动"触发"样式更新？

不是一个漂亮的解决方案，但在某些 Android 设备上，我只通过超时解决了类似的问题，例如;

setTimeout(function () {
    document.body.classList.add("gray");
}, 0);

"0"的时序通常有效，但在极少数情况下，甚至需要稍后执行。

上面的代码将等待所有执行队列赶上并更改类。 特别是在一些低性能的设备上，一些更改在JS执行时没有足够的时间渲染（可能是由于HTML渲染器中的错误）。

但同样重要的是要记住，您的代码可能具有可能导致此行为的其他部分。

也可以使用强制重绘

中说明的方法强制浏览器重绘如果这仍然不能解决问题，则可以使用 SetTimeout 延迟重绘本身。

相关文章：