Run results for: js Styles css text object

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser: Chrome 120

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
cssText	41519.0 Ops/sec
style	268486.9 Ops/sec
jquery	56330.2 Ops/sec
object	299691.3 Ops/sec

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    var $jq331 = $.noConflict(true);
</script>

<div id="box" style="background:#555;color:#FFF;position:absolute;left:0;top:0;width:400px;height:100px;</div>

Script Preparation code:

var elem = document.getElementById('box');
console.log("elem", elem);

console.log("jq", $jq331);
var jqElem = $jq331('#box')
console.log("jqElem", jqElem);

Tests:

cssText
elem.style.cssText +=';width:300px;height:50px;';
style
elem.style.width = '300px'; elem.style.height = '50px'; elem.style.top = '40px'; elem.style.left = '90px';
jquery
jqElem.css({ 'width': 300, 'height': 50, 'top':40, 'left': 90 });
object
Object.assign(elem.style,{width:"300px",height:"50px",top:"40px",left:"90px"});

Run results for: js Styles css text object

cssText

style

jquery

object