set styles 2

Benchmark created by juju on

Description

test differents ways to set styles on various elements

Preparation HTML

<style>
.test div {
transform:rotateX(30deg);
}
</style>
<div class="test">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>



</div>


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

Setup

var style = {
      border: '1px solid red',
      background: '#' + (~~(Math.random() * (1 << 24))).toString(16)
    };
    
    function getStyle() {
      return 'border:1px solid red;background: #' + (~~(Math.random() * (1 << 24))).toString(16);
    }
    
    var targets = document.querySelectorAll('.test div');

Test runner

Ready to run.

Testing in
TestOps/sec
style attribute
for (var i = 0; i < targets.length; i++) {
  targets[i].style = getStyle();
}  
ready
jquery.css
for (var i = 0; i < targets.length; i++) {
  $(targets[i]).css(style); 
}
ready
style.cssText
for (var i = 0; i < targets.length; i++) {
  targets[i].style.cssText = getStyle();
}
ready

Revisions

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