style versus jquery css (v18)

Revision 18 of this benchmark created on

Preparation HTML

<div id="test" style="width: 400px; height: 200px; background-color: #ccc;">
</div>
<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>

Setup

var cachedElement = document.getElementById('test');
    var cachedStyle = document.getElementById('test').style;
    var cached$ = $('#test');

Test runner

Ready to run.

Testing in
TestOps/sec
Jquery css()
$('#test').css('background-color', '#000000');
ready
Raw style
document.getElementById('test').style.backgroundColor = "#000000";
ready
cached jQuery item
cached$.css('background-color', '#000000');
ready
jQuery css via $(element)
$(cachedElement).css('background-color', '#000000');
ready
Style via jQuery cached
cached$[0].style.backgroundColor = "#000000";
ready
cachedElement
cachedElement.style.backgroundColor = "#000000";
ready
cachedStyle
cachedStyle.backgroundColor = "#000000";
ready
Raw style(array)
document.getElementById('test').style[ "background-color" ] = "#000000";
ready
Cached style(array)
cachedStyle[ "background-color" ] = "#000000";
ready

Revisions

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