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

Question

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

Answer 1

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

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

简而言之，尝试这样的事情：

  

第二种方法是定义一个新的   元素的style属性，   而不是一个一个地分配样式   一。大多数情况下这适合   动画等动态变化   新风格无法知晓的地方   提前。这是使用其中之一完成的   样式的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;');

Answer 4

如果您使用的是jQuery，它有一个.css函数，允许您一次添加多个样式：

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

Answer 5

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