cssText vs. multiple css rules (v10)

Revision 10 of this benchmark created on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
  var elem = document.getElementById('box');
  var $elem = $("#box");
</script>
<div id="box" style="background:#555;color:#FFF;position:absolute;left:0;top:0;width:400px;height:100px;">
</div>

Setup

var i = 1;
  
  function setStyle(propertyObject) {
    for (var property in propertyObject)
      elem.style[property] = propertyObject[property];
  }

Test runner

Ready to run.

Testing in
TestOps/sec
cssText
elem.style.cssText = 'width:' + i + 'px;height:' + i + 'px;top:' + i + 'px;left:' + i + 'px;';
i++;
ready
cssText 2
elem.style.cssText = 'width:' + i + 'px;height:' + i + 'px;top:' + i + 'px;left:' + i + 'px;';
i++;
ready
jQuery css({ })
$elem.css({
  'width': i,
  'height': i,
  'top': i,
  'left': i
});
i++;
ready
multiple style rules
elem.style.width = i + 'px';
elem.style.height = i + 'px';
elem.style.top = i + 'px';
elem.style.left = i + 'px';
i++;
ready
jQuery css()
$elem.css('width', i);
$elem.css('height', i);
$elem.css('top', i);
$elem.css('left', i);
i++;
ready
Custom method call
setStyle(elem , {
  'width': i + 'px',
  'height': i + 'px',
  'top': i + 'px',
  'left': i + 'px'
});
i++;
ready
setAttribute
elem.setAttribute('style','width:' + i + 'px;height:' + i + 'px;top:' + i + 'px;left:' + i + 'px;');
i++;
ready

Revisions

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