style vs cssText vs setAttribute (v3)

Revision 3 of this benchmark created by Rei on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
    #test div {
        float:left;
        }
</style>

<div id="test"></div>

Setup

var $test = $("#test")
      , cssText = typeof(document.createElement("div").style.cssText) != "undefined"
      , elems = []
      , colors = "#f88 #8f8 #88f #ff8 #8ff #f8f".split(" ")
      , el
      , text
      , count = 0
    
    test.innerHTML = ""
    
    for (var i=0; i<100; i++) {
        var el = $("<div>")
        elems.push(el)
        $test.append(el)
    }

Test runner

Ready to run.

Testing in
TestOps/sec
style
var el = elems[0][0]
el.style.width  = (i%10)+"px"
el.style.height = (i%10)+"px"
el.style.background = colors[++count%colors.length]
 
ready
cssText
var el = elems[0][0]
el.style.cssText = 'width:'+(i%10)+'px;'
    + 'height:'+(i%10)+'px;'
    + 'background:'+colors[++count%colors.length]
 
ready
setAttribute
var el = elems[0][0]
el.setAttribute("style", 'width:'+(i%10)+'px;'
    + 'height:'+(i%10)+'px;'
    + 'background:'+colors[++count%colors.length])
 
ready
jQuery.css
elems[0].css({ width:  i%10
             , height: i%10
             , background: colors[++count%colors.length]
             })
 
ready

Revisions

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