.style vs .className (v15)

Revision 15 of this benchmark created on

Description

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

Preparation HTML

<style type="text/css">
 .hide {
   display:none;
 }
</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>

Test runner

Ready to run.

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

while (anchorCount--) {
 anchorElements[anchorCount].setAttribute("class", "none");
}
ready
.className
var anchorElements = document.getElementById('ctl00_ctl00_ctl00_LeftCol_leftNav').getElementsByTagName('a'),
    anchorCount = anchorElements.length;

while (anchorCount--) {
 anchorElements[anchorCount].className = "hide";
}
ready

Revisions

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