cssText vs. multiple css rules (v5)

Revision 5 of this benchmark created on

Preparation HTML

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

<div id="box" style="background:#555;color:#FFF;position:absolute;left:0;top:0;width:400px;height:100px;"></div>

Setup

var i = 0;

Test runner

Ready to run.

Testing in
TestOps/sec
cssText
var elem = document.getElementById('box');
elem.style.cssText =';width:' + i + 'px;height:' + i + 'px;top:' + i + 'px;left:' + i + 'px;';
i++;
ready
cssText 2
var elem = document.getElementById('box');
elem.style.cssText = 'width:' + i + 'px;height:' + i + 'px;top:' + i + 'px;left:' + i + 'px;';
i++;
ready
jQuery css({ })
$('#box').css({ 'width': i, 'height': i, 'top':i, 'left': i });
i++;
ready
multiple style rules
var elem = document.getElementById('box');
elem.style.width = i + 'px';
//elem.style.height = i + 'px';
//elem.style.top = i + 'px';
//elem.style.left = i + 'px';
i++;
ready

Revisions

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