.style vs .setAttribute (v12)

Revision 12 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>
  var nav = document.getElementById('nav'),
      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
.setAttribute
for (var i = links.length; i--;) {
  links[i].setAttribute("style", "display:none;color#000");
  links[i].setAttribute("style", "display:block;color#fff");
}
ready
['style'][property]
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";
}
ready
.style[property]
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";
}
ready

Revisions

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