cssText vs. multiple css rules (v19)

Revision 19 of this benchmark created by Neo on

Preparation HTML

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

<div id="box" style="background:#555;color:#FFF;position:absolute;left:0;top:0;width:400px;height:100px;"></div>

Setup

function setStyle(element, propertyObject) {
    for (var property in propertyObject)
      element.style[property] = propertyObject[property];
  }

Test runner

Ready to run.

Testing in
TestOps/sec
cssText
var elem = document.getElementById('box');
elem.style.cssText += ';width:300px;height:50px;top:40px;left:90px;';
ready
cssText 2
var elem = document.getElementById('box');
elem.style.cssText = 'width:300px;height:50px;top:40px;left:90px;';
ready
jQuery css({ })
$('#box').css({
  'width': 300,
  'height': 50,
  'top': 40,
  'left': 90
});
ready
multiple style rules
var elem = document.getElementById('box');
elem.style.width = '300px';
elem.style.height = '50px';
elem.style.top = '40px';
elem.style.left = '90px';
ready
object (for in)
setStyle(document.getElementById('box'), {
  'width': '300px',
  'height': '50px',
  'top': '40px',
  'left': '90px'
});
ready

Revisions

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