cssText vs multiple style (v9)

Revision 9 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<style type="text/css">
  .style { left:20px; top:100px; font-size:20px; background: rgb(0, 0, 0) }
</style>
<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
className
element.className = 'style';
ready
cssText =
element.style.cssText = css;
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