style versus jquery css (v14)

Revision 14 of this benchmark created by Levi Hackwith on

Preparation HTML

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

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
jQuery CSS multiple
$('#test').css({
    'background-color': '#000000',
    'font-weight': 'bold',
    'color': 'red'
});
ready
Raw style multiple
var test = document.getElementById('test');

test.style.backgroundColor = "#000000";
test.style.fontWeight = "bold";
test.style.color = 'red';
 
ready

Revisions

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