javascript 如何在向 dom 元素添加类后强制 ie8 重新绘制
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13783840/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to force ie8 to repaint after adding a class to a dom element
提问by Doug
In ie8 if elements don't 'repaint' with the associated css when you change the classname, how can you force the browser to refresh and not kill ie8 performance?
在 ie8 中，如果更改类名时元素没有使用关联的 css 进行“重新绘制”，那么如何强制浏览器刷新而不影响 ie8 的性能？
This post (How can I force WebKit to redraw/repaint to propagate style changes?) suggested calling offsetHeight which forces a repaint.
这篇文章（如何强制 WebKit 重绘/重绘以传播样式更改？）建议调用 offsetHeight 强制重绘。
This post (http://www.tek-tips.com/viewthread.cfm?qid=1688809) had a comment that suggested adding and removing a class from body element.
这篇文章 ( http://www.tek-tips.com/viewthread.cfm?qid=1688809) 有一条评论建议从 body 元素中添加和删除一个类。
Both of these approaches killed ie8 performance and the first had side-effects on my layout.
这两种方法都会降低 ie8 的性能，第一种方法对我的布局有副作用。
What's the best approach?
最好的方法是什么？
回答by Doug
The solution I came up with for my ie8 issue was to add/remove a class on a near parent of the element i'm changing. Since I'm using modernizer, I check for ie8 and then do this add/remove dance to get the new css to paint.
我为 ie8 问题提出的解决方案是在我正在更改的元素的近父级上添加/删除一个类。由于我使用的是 Modernizer，我检查了 ie8，然后执行此添加/删除舞蹈以获取新的 css 进行绘制。
$uicontext.addClass('new-ui-look');
if ($('html').is('.ie8')) {
// IE8: ui does not repaint when css class changes
$uicontext.parents('li').addClass('z').removeClass('z');
}
回答by Adam
The correct answer to this question is that you need to actually change the contentrule.
这个问题的正确答案是您需要实际更改content规则。
.black-element:before { content:"Hey!"; color: #000;}
.red-element:before { content:"Hey! "; color: #f00;}
Notice the extra space I added after Hey!on .red-element
请注意，我后添加额外的空间Hey!上.red-element
回答by user489998
Ridiculously, this works:
可笑的是，这有效：
function ie8Repaint(element) {
element.html(element.html().replace('>', '>'));
}
Nothing actually changes in the DOM so it won't affect any other browsers.
DOM 中实际上没有任何变化，因此它不会影响任何其他浏览器。
回答by webaware
Fire a move or resize event on it.
在其上触发移动或调整大小事件。
var ie8 = whateverYouUseToDetectIE();
var element = document.getElementById("my-element");
element.className += " new-class";
if (ie8) {
element.fireEvent("resize");
}
回答by James Lawruk
This expands on the other answers here. You need to both add a new class (Doug's answer) and ensure the class has a different content value (Adam's answer). Changing the class alone may not be enough. The content change is needed to force IE8 to repaint. Here is a related blog post.
这扩展了此处的其他答案。您需要添加一个新类（Doug 的回答）并确保该类具有不同的内容值（Adam 的回答）。仅更改课程可能还不够。需要更改内容以强制 IE8 重新绘制。这是一篇相关的博客文章。
Here is the JQuery to change add the new class:
这是更改添加新类的 JQuery：
$(".my-css-class").addClass("my-css-class2");
Here is CSS with the 2nd class having a slightly different content value:
这是第二个类的 CSS 内容值略有不同：
.my-css-class:before {content: "\e014";}
.my-css-class2:before {content: "\e014 ";}
回答by Urchin
I had a lot of difficulty and tried everything to no avail...until I tried this for IE8
我遇到了很多困难，尝试了一切都无济于事……直到我为 IE8 尝试了这个
function toggleCheck(name) {
el = document.getElementById(name);
if( hasClass(el, 'checked') ) {
el.className = el.className.replace(/checked/,'unchecked');
} else if( hasClass(el, 'unchecked') ) {
el.className = el.className.replace(/unchecked/,'checked');
}
document.body.className = document.body.className;
}
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
And now my CSS changes for my checkboxes work beautifully for IE8, Chrome, and Firefox!
现在，我对复选框的 CSS 更改在 IE8、Chrome 和 Firefox 上都能很好地工作！
