如何强制WebKit重绘/重绘以传播样式更改？ [英] How can I force WebKit to redraw/repaint to propagate style changes?

问题描述

我有一些琐碎的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。

它会影响两个后代，这恰恰是兄弟姐妹。第一个兄弟更新，但第二个不更新。第二个元素的子元素也具有焦点，并且包含 onclick 属性中包含上述代码的< a> 标记。

在Chrome的开发者工具窗口中，如果我微调（例如取消选中并检查）任何 元素的任何属性，第二个同级更新到正确的风格。

有没有一个解决方法，轻松地和编程方式微调WebKit做正确的事情？

解决方案

我发现一些复杂的建议和许多简单的建议，但没有工作，但其中一个的评论 Vasil Dinkov 提供了一个简单的解决方案，强制重画/重绘工作很好：

  sel.style.display ='none'; 
 sel.offsetHeight; //不需要存储这个任何地方，引用就够了
 sel.style.display =''; 
  

如果它适用于除block之外的样式，我会让别人评论。 >

感谢，Vasil！

I have some trivial JavaScript to effect a style change:

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

This works fine with the latest versions of FF, Opera and IE, but fails on the latest versions of Chrome and Safari.

It affects two descendants, which happen to be siblings. The first sibling updates, but the second doesn’t. A child of the second element also has focus and contains the <a> tag that contains the above code in an onclick attribute.

In the Chrome "Developer Tools" window if I nudge (e.g. uncheck & check) any attribute of any element, the second sibling updates to the correct style.

Is there a workaround to easily and programmatically "nudge" WebKit into doing the right thing?

解决方案

I found some complicated suggestions and many simple ones that didn’t work, but a comment to one of them by Vasil Dinkov provided a simple solution to force a redraw/repaint that works just fine:

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

I’ll let someone else comment if it works for styles other than "block".

Thanks, Vasil!

这篇关于如何强制WebKit重绘/重绘以传播样式更改？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！