有没有办法批量应用多个 CSS 样式以避免多次重排？答案

【问题标题】：Is there a way to apply multiple CSS styles in a batch to avoid multiple reflows?有没有办法批量应用多个 CSS 样式以避免多次重排？
【发布时间】：2011-05-11 14:04:43
【问题描述】：

我知道直接通过 JavaScript 更改元素的样式会导致重排。但是，我想知道是否可以只用一次回流就可以在一批中更改多个样式值？

【问题讨论】：

标签： javascript dom layout

【解决方案1】：

不是直接的，但这里有一些关于尽量减少回流影响的好建议：

http://dev.opera.com/articles/view/efficient-javascript/?page=3

简而言之，试试这样的：

第二种方法是定义一个新的元素的样式属性，而不是一个分配样式一。大多数情况下，这适用于动态变化，例如动画，无法知道新样式的地方提前。这是使用任一样式的 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);
}

【讨论】：

好方法。请注意if 的第一部分将覆盖任何已经存在的内联样式。无论如何，设置posElem.style.cssText += newStyle 就可以了。见fiddle
实际上，可能会放弃 if 语句，只留下 posElem.style.cssText += newStyle（再次，请参阅更新后的 fiddle），因为即使样式还没有，它似乎也能以相同的方式工作那里。不过不确定浏览器的怪癖。
链接现在已经失效，所以我无法检查，但 IIRC 是兼容性问题。此外，您不会总是想在动画中添加例如

【解决方案2】：

如果你使用的是 jQuery，它有一个 .css 函数可以让你一次添加多个样式：

$('element').css({'color':'red', 'border':'#555 solid thin'});

【讨论】：

不错的想法 - 我得看看幕后实际做了什么

【解决方案3】：

您可以将所有样式放在一个 CSS 类中

.foo { background:#000; color:#fff; ... }

然后将其分配给 className 属性

// javascript
var your_node = document.getElementById('node_id');
your_node.className = 'foo'

那应该只触发一次重绘/重排

【讨论】：

-1 并没有真正回答这个问题，如果属性是预先知道的，那么显然 CSS 类将是要走的路，但是，如果你使用 js 来计算。值，那么这将不起作用。

【解决方案4】：

您可以将元素的可见性设置为“隐藏”，然后应用样式，然后再次使其可见。

【讨论】：

【解决方案5】：

使用：

document.getElementById('elemnt_ID').setAttribute('style','color:white; margin:5px;');

【讨论】：