Making style changes

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 or reflow.