我怎样才能强迫WebKit重绘/重绘来传播样式变化?

我有一些简单的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做正确的事情?

当前回答

这个答案是给那些在使用Angular 10的@danorton解决方案中苦苦挣扎的人的。这个解决方案

sel.style.display='none';
sel.offsetHeight;
sel.style.display='';

适用于我只有“buildOptimizer”:false在angular。json文件。看起来优化器以某种方式破坏了这个。

其他回答

对我来说唯一有效的解决方案类似于sowasred2012的答案:

$('body').css('display', 'table').height();
$('body').css('display', 'block');

我在页面上有很多问题块，所以我改变了根元素的显示属性。我使用display: table;而不是display: none;，因为none将重置滚动偏移量。

我有这个问题的一个数量的div被插入到另一个div的位置:绝对，插入的divs没有位置属性。当我把这个位置:相对，它工作得很好。(真的很难找到问题所在)

在我的例子中，Angular使用ng-repeat插入元素。

我发现了一些复杂的建议和许多简单的不起作用的建议，但Vasil Dinkov对其中一个建议的评论提供了一个简单的解决方案来强制重绘/重绘，工作得很好:

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

我将让其他人评论，如果它适用于“块”以外的样式。

谢谢,Vasil !

丹诺顿方案对我不起作用。我有一些非常奇怪的问题，webkit不会画一些元素在所有;输入中的文本直到onblur才更新;并且改变className不会导致重绘。

我偶然发现，我的解决方案是在脚本之后向正文添加一个空的样式元素。

<body>
...
<script>doSomethingThatWebkitWillMessUp();</script>
<style></style>
...

这就解决了问题。这有多奇怪?希望这对某些人有所帮助。

我建议使用一种不那么粗鲁和更正式的方式强制回流:使用forceDOMReflowJS。在您的示例中，您的代码将如下所示。

sel = document.getElementById('my_id');
forceReflowJS( sel );
return false;

推荐文章