ClassList versus ClassName (v15)

Revision 15 of this benchmark created on

Preparation HTML

<style>
.base{
display: inline-block;
width:300px;
height:300px;
 border:1px solid black;
}

.red {
color:red; 
}
.bold{
  font-weight:bold;
}
.upper{
  text-transform:uppercase;
}
</style>

<div id="dom" class="base">
    test
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
classlist
var div = document.getElementById("dom");
div.className = "base";
div.classList.add("red");
div.classList.add("bold");
div.classList.add("upper");
ready
classname
var div = document.getElementById("dom");
div.className = "base";
div.className += "red bold upper";
}
ready

Revisions

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