我有一些简单的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做正确的事情?
当前回答
这将强制重绘，同时避免闪烁，现有的元素修补和任何布局问题…
function forceRepaint() {
requestAnimationFrame(()=>{
const e=document.createElement('DIV');
e.style='position:fixed;top:0;left:0;bottom:0;right:0;background:#80808001;\
pointer-events:none;z-index:9999999';
document.body.appendChild(e);
requestAnimationFrame(()=>e.remove());
});
}
其他回答
这个答案是给那些在使用Angular 10的@danorton解决方案中苦苦挣扎的人的。 这个解决方案
sel.style.display='none';
sel.offsetHeight;
sel.style.display='';
适用于我只有“buildOptimizer”:false在angular。json文件。 看起来优化器以某种方式破坏了这个。
我发现，只是添加一个内容样式的元素强制它重新绘制，这应该是一个不同的值，每次你想要它重新绘制，而不需要在一个伪元素。
.selector {
content: '1'
}
我发现了一些复杂的建议和许多简单的不起作用的建议，但Vasil Dinkov对其中一个建议的评论提供了一个简单的解决方案来强制重绘/重绘，工作得很好:
sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='';
我将让其他人评论，如果它适用于“块”以外的样式。
谢谢,Vasil !
出于某种原因，我无法让danorton的答案工作，我可以看到它应该做什么，所以我稍微调整了一下:
$('#foo').css('display', 'none').height();
$('#foo').css('display', 'block');
这对我很有效。
我想补充的是，现在需要在父节点上设置样式。
sel.parentNode.style.display = 'none';
sel.parentNode.offsetHeight;
sel.parentNode.style.display = '';
在当前版本的Safari(15.6)中，这是唯一适用于我的解决方案。
