Class vs. Style (v12)

Revision 12 of this benchmark created on

Preparation HTML

<style>
  .one { width: 100px; }
</style>
<div id="candidate">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
  function addClass(element, new_class) {
    var n = 0;

    new_class = new_class.split(",");

    for (var i = new_class.length - 1; i >= 0; i--) {
      if ((" " + element.className + " ").indexOf(" " + new_class[i] + " ") == -1) {
        element.className += " " + new_class[i];
        n++;
      }
    };

    return n;
  }
</script>

Setup

var candidate = document.getElementById('candidate');

Teardown


    $(candidate).removeClass('one')

Test runner

Ready to run.

Testing in
TestOps/sec
Class (className)
candidate.className = 'one';
ready
Class (setAttribute)
candidate.setAttribute('class', 'one');
ready
Style
candidate.style.width = '100px';
ready
Style (setAttribute)
candidate.setAttribute('style', 'width: 100px;');
ready
addClass(candidate, 'one')
ready
classList.add()
candidate.classList.add('one')
ready

Revisions

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