如何强制 WebKit 重画以确保样式传播到后代元素？

强制 WebKit 重新绘制以进行样式传播

在实现 JavaScript 样式更改时，Web 开发人员可能会遇到浏览器之间的不一致问题。在 Chrome 和 Safari 等基于 WebKit 的浏览器中，对元素类名的简单更新可能无法传播到后代。

更新同级时会出现此问题，第一个同级接收新样式，但第二个不受影响。受影响元素中焦点和锚标记的存在使情况进一步复杂化。

解决方法：使用显示切换触发重画

要在 WebKit 中解决此问题，简单而有效的解决方法是切换受影响元素的显示属性：

sel.style.display = 'none';
sel.offsetHeight; // Accessing offsetHeight forces a reflow
sel.style.display = '';

这会触发重绘或重绘操作，将样式更改传播到所有后代。值得注意的是，该技术已被证实适用于块级元素，其对于其他显示类型的功效可能需要进一步探索。

以上是如何强制 WebKit 重画以确保样式传播到后代元素？的详细内容。更多信息请关注PHP中文网其他相关文章！