Class vs. Style (v23)

Revision 23 of this benchmark created by winterland on

Preparation HTML

<style>
  .one { background: red; width: 100px; height: 100px; }
  .two { background: blue; width: 50px; height: 50px; }
</style>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

Setup

var x = document.getElementsByClassName('test');

Test runner

Ready to run.

Testing in
TestOps/sec
Class (className)
var i;
for (i = 0; i < x.length; i++) {
x[i].className = 'one';
}

for (i = 0; i < x.length; i++) {
x[i].className = 'two';
}
ready
modify style tag
document.getElementsByTagName('style')[0].innerHTML = 
".test{ background: red; width: 100px; height: 100px; }";

document.getElementsByTagName('style')[0].innerHTML = 
".test{ background: blue; width: 50px; height: 50px; }";
ready

Revisions

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