.style vs .className (v6)

Revision 6 of this benchmark created by Mike McCaughan on

Description

Is it faster to use JavaScript .style, or to change the class of an object using .className.

EDIT: Toggle className rather than just adding/removing class.

Preparation HTML

<style type="text/css">
  .hide { display:none; } .show { display: inline; }
</style>
<div id="ctl00_ctl00_ctl00_LeftCol_leftNav">
  <ul>
    <li>
      <a class="AspNet-Menu-Link" href="#">Home</a>
    </li>
    <li>
      <a class="AspNet-Menu-Link" href="#">Home &#38; me</a>
    </li>
    <li>
      <a class="AspNet-Menu-Link" href="#">home</a>
    </li>
    <li>
      <a class="AspNet-Menu-Link" href="#">Home > Apples</a>
    </li>
    <li>
      <a class="AspNet-Menu-Link" href="#">Home</a>
    </li>
    <li>
      <a class="AspNet-Menu-Link" href="#">Ho_me</a>
    </li>
  </ul>
</div>
<script>
  var addClass = function(element, className) {
  var re = res[className] ? res[className] : new RegExp('(^|\s)(' + className + ')($|\s)');
  re[className] = re;
  element.className = re.test(element.className) ? element.className : element.className + ' ' + className;
      },
      removeClass = function(element, className) {
  var re = res[className] ? res[className] : new RegExp('(^|\s)(' + className + ')($|\s)');
  re[className] = re;
  element.className = re.test(element.className) ? element.className.replace(re, '$1$3') : element.className;
      },
      show = function(element) {
      element.style.display = 'inline';
      },
      hide = function(element) {
      element.style.display = 'none';
      },
  res = {};
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
.style
var anchorElements = document.getElementById('ctl00_ctl00_ctl00_LeftCol_leftNav').getElementsByTagName('a'),
    anchorCount = anchorElements.length,
el = null;

while (--anchorCount) {
  el = anchorElements[anchorCount];
  hide(el);
  show(el);
}
ready
.className
var anchorElements = document.getElementById('ctl00_ctl00_ctl00_LeftCol_leftNav').getElementsByTagName('a'),
    anchorCount = anchorElements.length,
el = null;

while (--anchorCount) {
  el = anchorElements[anchorCount];
  removeClass(el, "hide");
  addClass(el, "hide");
}
ready

Revisions

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