style vs css for more than 20 elements

Benchmark created by Rasmita Dash on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div><div><div><div></div></div></div></div>
<div><div><div><div></div></div></div></div>
<div><div><div><div></div></div></div></div>
<div><div><div><div></div></div></div></div>
<div><div><div><div></div></div></div></div>
<div><div><div><div></div></div></div></div>
<div><div><div><div></div></div></div></div>

Test runner

Ready to run.

Testing in
TestOps/sec
Css property
$('div').css({ 'color': 'red','width': '200px','height': '200px',
'border': '1px solid','margin-left': '10px','position': 'relative','display': 'block'
});
ready
style tag
$("<style type=\"text/css\">div { color: red,\width: 200px,\height: 200px,\
border: 1px solid,\margin-left: 10px,\position: relative,\display: block }</style>")
 .appendTo("head");
ready

Revisions

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

  • Revision 1: published by Rasmita Dash on