When we apply many style changes using JavaScript for a single element, phpied and Writing Effective JavaScript (slide 87) suggests:
instead of applying styles one by one using style.stylename, apply everything one at a time using cssText or changing the class name, as this will reduce the number of recalculations / repaints
Which is better if only a single style change?
document.getElementById('myid').style.cssText += ";color:#999;";
OR
document.getElementById('myid').style.color = "#999";
jsperf.com/csstext-vs-styles-single shows that when changing only one style, using an individual style name is faster than cssText.
Are there any other factors?
optimization javascript css reflow repaint
Anish
source share