attr('style') vs css() 2.0.3 (v5)

Revision 5 of this benchmark created on

Preparation HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="testme">Hello, world!</div>

Test runner

Ready to run.

Testing in
TestOps/sec
attr('style') - 5
$('#testme').attr('style', 'position:relative;top:0;left:0;color:red;font-size:12px');
ready
css() - 5
$('#testme').css({
 position: 'relative',
 top: 0,
 left: 0,
 color: 'red',
 fontSize: '12px'
});
ready
.style - 5
var div = $('#testme')[0].style;
div.position = 'relative';
div.top = '0';
div.left = '0';
div.color = 'red';
div.fontSize = '12px';
ready
attr('style') - 20
$('#testme').attr('style', 'position:relative;top:0;left:0;bottom:0;right:0;float:left;line-height:20px;height:50px;width:200px;border:1px solid black;background:green;color:red;font-size:12px;font-style:italic;padding:20px;margin:20px;text-transform:uppercase;text-decoration:underline;cursor:pointer;');
ready
css() - 20
$('#testme').css({
 'position': 'relative',
 'top': 0,
 'left': 0,
 'bottom': 0,
 'right': 0,
 'float': 'left',
 'lineHeight': '20px',
 'height': '50px',
 'width': '200px',
 'border': '1px solid black',
 'background': 'green',
 'color': 'red',
 'fontSize': '12px',
 'fontStyle': 'italic',
 'padding': '20px',
 'margin': '20px',
 'textTransform': 'uppercase',
 'textDecoration': 'underline',
 'cursor': 'pointer',
 'color': 'red',
 'fontSize': '12px'
});
ready
.style - 20
var div = $('#testme')[0].style;
div.position = 'relative';
div.top = '0';
div.left = '0';
div.bottom = 0;
div.right = 0;
div.float = 'left';
div.lineHeight = '20px';
div.height = '50px';
div.width = '200px';
div.border = '1px solid black';
div.background = 'green';
div.color = 'red';
div.fontSize = '12px';
div.fontStyle = 'italic';
div.padding = '20px';
div.margin = '20px';
div.textTransform = 'uppercase';
div.textDecoration = 'underline';
div.cursor = 'pointer';
div.color = 'red';
div.fontSize = '12px';
ready

Revisions

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