Class vs. Style (v10)

Revision 10 of this benchmark created on

Preparation HTML

<style>
  .one { background: red; width: 100px; height: 100px; }
  .two { background: blue; width: 50px; height: 50px; }
</style>
<div id="wrapper">
<div class="innerWrapper">
<div id="candidate">
<ul>
<li>Foo</li>
</ul>
<p>Bar</p>
</div>
<div><span>Yet another String</span></div>
</div>
</div>

Setup

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

Test runner

Ready to run.

Testing in
TestOps/sec
Class (className)
candidate.className = 'one';
candidate.className = 'two';
ready
Style
candidate.style.background = 'red';
candidate.style.width = '100px';
candidate.style.height = '100px';

candidate.style.background = 'blue';
candidate.style.width = '50px';
candidate.style.height = '50px';
ready

Revisions

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