刷新CSS样式？ （重绘页面）

Question

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

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

当我这样做时

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

页面上的所有样式都应更改为＆＃34; new＆＃34;样式。但是，我测试过的一台设备表现得很奇怪。风格没有得到更新，但是通过JS的一些日志记录，我知道已经添加了类。由于某种原因，风格保持不变。这并不总是发生，有时它确实发生，有时它表现得正确。

那么，有没有办法手动＆＃34;触发＆＃34;样式的更新？

Answer 1

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

setTimeout(function () {

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

＆＃34; 0＆＃34;通常有效但在极少数情况下甚至需要稍后执行。

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

但请务必记住，您的代码可能包含可能导致此行为的其他部分。

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