.style vs .setAttribute (v11)

Revision 11 of this benchmark created on

Description

Applying multiple css attributes

Preparation HTML

<style type="text/css">
 .hide {
   display:none;
 }
.show{
   display:block;
 }

</style>

<ul id="nav">
  <li><a href="#">elem1</a></li>
  <li><a href="#">elem2</a></li>
  <li><a href="#">elem3</a></li>
  <li><a href="#">elem4</a></li>
  <li><a href="#">elem5</a></li>
</ul>
<script>
  // IE only supports setAttribute("className")
  var ATTR_CLASS_NAME = (function() {
   var el = document.createElement("div");
   el.className = "test";
   if (el.getAttribute("class") === "test") return "class";
   else return "className";
  })();
  
  function addClass(el, className) {
   var cname = el.className;
   if (cname.indexOf(className) == -1) {
    el.className = cname + " " + className;
   }
  }
  
  function addClass2(el, className) {
   var cname = el.getAttribute(ATTR_CLASS_NAME);
   if (cname.indexOf(className) == -1) {
    el.setAttribute(ATTR_CLASS_NAME, cname + " " + className);
   }
  }
  
  function removeClass(el, className) {
   var cname, arr = className.split(" ");
   if (cname = el.className) {
    if (className) {
     cname = " " + cname + " ";
     for (var i = arr.length; i--;) {
      cname = cname.replace(" " + arr[i] + " ", " ");
     }
     el.className = cname.substring(1, cname.length - 1);
    } else {
     el.className = "";
    }
   }
  }
  var nav = document.getElementById('nav');
  var links = nav.getElementsByTagName('a');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
.style
for (var i = links.length; i--;) {
 links[i].style.display = "none";
 links[i].style.display = "block";
 links[i].style.color = "#000";
 links[i].style.color = "#fff";
 links[i].style.display = "none";
 links[i].style.display = "block";
 links[i].style.color = "#000";
 links[i].style.color = "#fff";
}
ready
.className
for (var i = links.length; i--;) {
 links[i].setAttribute("style", "display:none;color#000");
 links[i].setAttribute("style", "display:block;color#fff");
}
ready

Revisions

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