Stylesheet vs DOM manipulation (v7)

Revision 7 of this benchmark created by Mo on October 23, 2015

Description

Preparation HTML

<style type="text/css">.red{color:red}.green{color:green}</style>
<div id="untouched">This DIV is unchanged</div>
<div id="touched">This DIV needs to be manipulated</div>

Setup

var sheet = (function() {
        // Create the <style> tag
        var style = document.createElement("style");
    
        // Add a media (and/or media query) here if you'd like!
        // style.setAttribute("media", "screen")
        // style.setAttribute("media", "only screen and (max-width : 1024px)")
    
        // WebKit hack :(
        style.appendChild(document.createTextNode(""));
    
        // Add the <style> element to the page
        document.head.appendChild(style);
    
        return style.sheet;
    })();
    
    function addCSSRule(sheet, selector, rules, index) {
        if("insertRule" in sheet) {
                sheet.insertRule(selector + "{" + rules + "}", index);
        }
        else if("addRule" in sheet) {
                sheet.addRule(selector, rules, index);
        }
    }
    
    var elemPreselected = document.getElementById("touched"),
        elemPreselectedStyle = elemPreselected.style;
    
    var head=        document.getElementsByTagName('head')[0]
    function appendStyle(css) {
            var style = document.createElement("style");
            style.setAttribute('rel', 'stylesheet');
            style.setAttribute('type', 'text/css');
            
            style.innerHTML = css;
            
            head.appendChild(style);
    };
    
    
    function replaceStyleAttribute(e, css) {
          e.setAttribute("style", css);
    }
    
    function appendStyleAttribute(e, css) {
         e.setAttribute('style', e.getAttribute('style') + ";" + css);
    }

Teardown

    var elemPreselected = document.getElementById("touched");
    elemPreselected.style.color = "";
    elemPreselected.className = "";
  

Test runner

appendStyle("#touched{ color:red; color:green; }");

addCSSRule(document.styleSheets[0], "#touched", "color: red");
addCSSRule(document.styleSheets[0], "#touched", "color: green");

var elem = document.getElementById("touched");
elem.className = "red";
elem.className = "green";

elemPreselected.style.color = "red";
elemPreselected.style.color = "green";

elemPreselected.className = "red";
elemPreselected.className = "green";

var elem = document.getElementById("touched");
elem.style.cssText = "color:red";
elem.style.cssText = "color:green";

elemPreselected.style.cssText = "color:red";
elemPreselected.style.cssText = "color:green";

elemPreselectedStyle.color = "red";
elemPreselectedStyle.color = "green";

var elem = document.getElementById("touched");
elem.style.color = "red";
elem.style.color = "green";

replaceStyleAttribute(elemPreselected, "color:red; color:green");

appendStyleAttribute(elemPreselected, "color:red; color:green");

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by MacK on January 30, 2015
• Revision 2: published by qgustavor on January 30, 2015
• Revision 3: published by check_ca on January 30, 2015
• Revision 4: published by Roman Liutikov on January 30, 2015
• Revision 6: published by Pierre Reimertz on March 28, 2015
• Revision 7: published by Mo on October 23, 2015