有一种方法可以批量应用多个CSS样式，以避免多次回流？

问题描述

我知道通过JavaScript直接改变元素的风格会导致回流。然而，我想知道是否可以在一个批次中改变多个样式值，只有一个回流？

解决方案

不是直接有一些关于最大限度地减少回流影响的好建议：

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

  var posElem = document.getElementById（'animation'）; 
 var newStyle ='background：'+ newBack +';'+ 
'color：'+ newColor +';'+ 
'border：'+ newBorder +';'; 
 if（typeof（posElem.style.cssText）！='undefined'）{
 posElem.style.cssText = newStyle; //使用+ =保存现有样式
} else {
 posElem.setAttribute（'style'，newStyle）; 
} 
  

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?

解决方案

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

In short, try something like this:

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

这篇关于有一种方法可以批量应用多个CSS样式，以避免多次回流？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！