style vs className vs jquery (v2)

Revision 2 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.c0 {  left:0px; }
.c1 { left: 100px; }
</style>
<p id="elem"></p>

Setup

var $elem = $('#elem'), i = 0, elem = document.getElementById('elem');
    var style = elem.style;

Test runner

Ready to run.

Testing in
TestOps/sec
jquery className
$elem.attr('class', 'c' + i);
i++;
i=i%2;
ready
jquery class
$elem.addClass('c' + i);
i++;
i=i%2;
$elem.removeClass('c' + i);
ready
html class name
elem.className = 'c' + i;
i++;
i=i%2;
ready
html style
elem.style.left = (i == 0 ? '0px' : '10px');
i++;
i=i%2;
ready
html css text
elem.style.cssText = ';left: ' + (i == 0 ? '0px' : '10px') + ';';
i++;
i=i%2;
ready
two html style
elem.style.left = (i == 0 ? '0px' : '10px');
elem.style.color = (i == 0 ? 'white' : 'black');
i++;
i=i%2;
ready
html setAttribute
elem.setAttribute('style', "left:" + (i == 0 ? '0px' : '10px'));
i++;
i=i%2;    
 
ready
html style (with cached variable)
style.left = (i == 0 ? '0px' : '10px');
i++;
i=i%2;
ready

Revisions

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