javascript 有没有办法批量应用多个 CSS 样式以避免多次回流？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4207505/
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
Is there a way to apply multiple CSS styles in a batch to avoid multiple reflows?
提问by Tower
I know that altering element's style via JavaScript directly will cause a reflow. However, I was wondering if it is possible to alter multiple style values in a batch with only one reflow?
我知道直接通过 JavaScript 改变元素的样式会导致回流。但是，我想知道是否可以仅通过一次回流来批量更改多个样式值？
采纳答案by Basic
Not directly but there are some good suggestions on minimising the impact of reflows here:
不是直接的，但这里有一些关于最小化回流影响的好建议：
http://dev.opera.com/articles/view/efficient-javascript/?page=3
http://dev.opera.com/articles/view/efficient-javascript/?page=3
In short, try something like this:
简而言之，尝试这样的事情：
The second approach is to define a new style attribute for the element, instead of assigning styles one by one. Most often this is suited to dynamic changes such as animations, where the new styles cannot be known in advance. This is done using either the cssText property of the style object, or by using setAttribute. Internet Explorer does not allow the second version, and needs the first. Some older browsers, including Opera 8, need the second approach, and do not understand the first. So the easy way is to check if the first version is supported and use that, then fall back to the second if not.
第二种方法是为元素定义一个新的样式属性，而不是一个一个地分配样式。大多数情况下，这适用于动态变化，例如动画，在这种情况下无法提前知道新样式。这是使用样式对象的 cssText 属性或使用 setAttribute 完成的。Internet Explorer 不允许使用第二个版本，需要第一个版本。一些较旧的浏览器，包括 Opera 8，需要第二种方法，并且不理解第一种方法。因此，简单的方法是检查是否支持第一个版本并使用它，如果不支持，则回退到第二个版本。
var posElem = document.getElementById('animation');
var newStyle = 'background: ' + newBack + ';' +
'color: ' + newColor + ';' +
'border: ' + newBorder + ';';
if( typeof( posElem.style.cssText ) != 'undefined' ) {
posElem.style.cssText = newStyle; // Use += to preserve existing styles
} else {
posElem.setAttribute('style',newStyle);
}
回答by afgomez
You could put all the styles in a CSS class
你可以把所有的样式放在一个 CSS 类中
.foo { background:#000; color:#fff; ... }
and then assign it to the className property
然后将其分配给 className 属性
// javascript
var your_node = document.getElementById('node_id');
your_node.className = 'foo'
That should trigger only one repaint/reflow
那应该只触发一次重绘/回流
回答by T.Todua
use:
利用：
document.getElementById('elemnt_ID').setAttribute('style','color:white; margin:5px;');
回答by stewe
You could set the element's visibility to 'hidden', then apply the styles and then make it visible again.
您可以将元素的可见性设置为“隐藏”，然后应用样式，然后再次使其可见。
回答by Cubed Eye
If you were using jQuery, it has a .css function that allows you to add multiple style at once:
如果你使用 jQuery，它有一个 .css 函数，允许你一次添加多个样式：
$('element').css({'color':'red', 'border':'#555 solid thin'});
$('element').css({'color':'red', 'border':'#555 solid thin'});
