cssText vs multiple style (v3)

Revision 3 of this benchmark created by Bruno Garcia 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)",
      elStyle = element.style;
</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)";
element.style.fontSize = "20px";
ready
Style Var
elStyle.cssText += css;
ready
No addition
element.style.cssText = css;
ready
setProperty
element.style.setProperty("left", "20px", "");
element.style.setProperty("top", "100px", "");
element.style.setProperty("background", "rgb(0, 0, 0)", "");
element.style.setProperty("fontSize", "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