cssText vs multiple style (v7)

Revision 7 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="element" style="width:200px">My Element</div>
<script>
  var element = document.getElementById("element"),
      css = "left:20px; top:100px; font-size:20px; background: rgb(0, 0, 0)";
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
cssText
element.style.cssText += css;
ready
cssText plus
element.style.cssText += ';' + css;
ready
Multiple styles
element.style.left = "20px";
element.style.top = "100px"
element.style.background = "rgb(0, 0, 0)"
ready
jQuery CSS
var cssObj = {
 'background-color': 'rgb(0, 0, 0',
 'top': '20px',
 'left': '20px'
}
$('#element').css(cssObj);
ready
jQuery CSS novar
$('#element').css({
 'background-color': 'rgb(0, 0, 0',
 'top': '20px',
 'left': '20px'
});
ready

Revisions

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

  • Revision 1: published by Mircea Piturca on
  • Revision 2: published by Mircea Piturca on
  • Revision 3: published by Bruno Garcia on
  • Revision 4: published by jQuery .css on
  • Revision 5: published by jQuery .css on
  • Revision 7: published on
  • Revision 8: published by skyline3000 on
  • Revision 9: published on