有没有办法在批处理中应用多个CSS样式以避免多次回流？

Question

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

Answer 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);
}

Answer 2

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

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

然后将其分配给className属性

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

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

Answer 3

使用:

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