Setting style on nodes with dynamic stylesheets (elm count=50) (v6)

Revision 6 of this benchmark created by Sam Foster on May 16, 2011

Description

Preparation HTML

<style>
#theList.static-one li {
        background-color: #ff9;
        width: 100px; 
        border: 1px solid green;
}
#theList.static-two li {
        background-color: #f9f;
        width: 200px; 
        border: 1px dotted black;
}
#theList.static-three li {
        background-color: #9ff;
        width: 300px; 
        border: none;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></script>


<ul class="someList" id="theList"> 

</ul>
<script>
  dojo.require("dojox.html.styles");
  dojo.require("dojox.lang.functional.object");
  
  var elementCount = 50,
      listMarkup = new Array(1 + elementCount).join('<li class="item"><span class="label">List item</span></li>\n');
  
  var applyStyleViaDynamicStyleSheet = (function() {
   var dynCssRulesMap = {}; // lookup for easy rule removal
   var sheetName = "dyncss_demo";
  
   return function(selector, arPropertyValues) {
    var sheet = dojox.html.getDynamicStyleSheet(sheetName);
    var rulesMap = dynCssRulesMap;
    var declarationStr = arPropertyValues.join(";\n");
  
    // give this rule an id - not very fine-grained
    var ruleId = selector + declarationStr;
    if (rulesMap[ruleId]) {
     // removeCssRule needs to loop over the entire stylesheet to find a matching selector/delaration pair
     // we minimize that cost by maintaining a hash of the rules we've added
     // its then just a lookup to determine if matching rule exists already 
     // that needs to be removed to be redefined
     // we already have rule of this name, remove it first
     dojox.html.removeCssRule(selector, declarationStr, sheetName);
    }
  
    var rs = dojox.html.insertCssRule(selector, declarationStr, sheetName);
  
    // store it for fast removal 
    rulesMap[ruleId] = [selector, declarationStr];
   }
  })();
</script>

Test runner

dojo.byId("theList").innerHTML = listMarkup;
var nodes = dojo.query("li", dojo.byId("theList"));
nodes.style({
 backgroundColor: '#ff9',
 width: '100px',
 border: '1px solid green'
});
nodes.style({
 backgroundColor: '#f9f',
 width: '200px',
 border: '1px dotted black'
});
nodes.style({
 backgroundColor: '#9ff',
 width: '300px',
 border: 'none'
});

dojo.byId("theList").innerHTML = listMarkup;
applyStyleViaDynamicStyleSheet("#theList li", ['background-color: #ff9', 'width: 100px', 'border: 1px solid green']);
applyStyleViaDynamicStyleSheet("li", ['background-color: #f9f', 'width: 200px', 'border: 1px dotted black']);
applyStyleViaDynamicStyleSheet("li", ['background-color: #9ff', 'width: 300px', 'border: none']);

document.getElementById("theList").innerHTML = listMarkup;
var nodes = document.getElementById("theList").getElementsByTagName("li");

for (var i = 0, len = nodes.length; i < len; i++) {
 nodes[i].style.cssText = 'background-color: #ff9;width: 100px;border: 1px solid green';
}

for (var i = 0, len = nodes.length; i < len; i++) {
 nodes[i].style.cssText = 'background-color: #f9f;width: 200px;border: 1px dotted black';
}


for (var i = 0, len = nodes.length; i < len; i++) {
 nodes[i].style.cssText = 'background-color: #9ff;width: 300px;border: none';
}

Revisions

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

• Revision 6: published by Sam Foster on May 16, 2011