一尘不染

如何强制WebKit重绘/重绘以传播样式更改?

css

我有一些琐碎的JavaScript可以实现样式更改:

sel = document.getElementById('my_id');
sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected');
return false;

在最新版本的FF,Opera和IE上可以正常使用,但在最新版本的Chrome和Safari上无法使用。

它影响了两个后代,它们恰好是兄弟姐妹。第一个同级更新,但第二个不更新。第二个元素的子元素也具有焦点,并包含 < a>标记,该标记在
onclick 属性中包含上述代码。

如果我微调(例如取消选中和选中) 任何 元素的 任何 属性,则在Chrome“开发人员工具”窗口中,第二个兄弟姐妹将更新为正确的样式。 __

是否有一种解决方法可以轻松地以编程方式“推动” WebKit做正确的事情?


阅读 272

收藏
2020-05-16

共1个答案

一尘不染

我发现了一些复杂的建议,许多简单的建议都行不通,但是Vasil Dinkov对其中一个进行了评论,提供了一个简单的解决方案,可以强制重新绘制/重新绘制效果很好:

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='';

如果它适用于“ block”以外的其他样式,我会让其他人评论。

谢谢

2020-05-16