cssText vs style (v29)

Revision 29 of this benchmark created on

Description

Comparing the performance of using style against changing directly cssText. Also compared against with just adding a css classname.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="element">
</div>
<style type=”text/css”>
  .newClass { left:10px; top:50px; background:red; }
</style>

Setup

var element = document.getElementById('element');
    var left = 10;
    var top = 50;
    var background = 'red';

Test runner

Ready to run.

Testing in
TestOps/sec
element.style
element.style.left = left + 'px';
element.style.top = top + 'px';
element.style.background = background;
ready
element.cssText
element.style.cssText = 'left: ' + left + 'px; top: ' + top + 'px; background: ' + background + ';';
ready
change css class
element.className = 'newClass';
ready
classList
element.classList.add('newClass');
ready
Set attribute
element.setAttribute('style', 'left: ' + left + 'px; top: ' + top + 'px; background: ' + background + ';');
ready
Append style tag
$("<style type='text/css'> #element { left: " + left + "px; top: " + top + "px; } </style>").appendTo("head");
ready

Revisions

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