attr('style') vs css() (v7)

Revision 7 of this benchmark created on

Preparation HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/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
attr('style') - 1
$('#testme').attr('style', 'position:relative;');
ready
css() - 1
$('#testme').css({
  'position': 'relative'
});
ready
.style - 1
var div = $('#testme')[0].style;
div.position = 'relative';
ready

Revisions

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