In the same way as when we mentioned how to modify many nodes at once when traversing the DOM tree, it is possible to make many style changes simultaneously on a document fragment in order to minimize the number of repaints or reflows. Take the following code snippet as an example:
function myJS(){ let container = document.getElementById("container1"); let modifStyle = "background: " + newBackgound + ";" + "color: " + newColor + ";" + "border: " + newBorder + ";"; if(typeof(container.style.cssText) != "undefined") { container.style.cssText = modifStyle; } else { container.setAttribute("style", modifStyle); }}
As we can see, any number of style attributes could be modified in this way in order to trigger only one repaint ...
