Run results for: js css - style.cssText vs style vs setAttribute

Run details:

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser: Firefox 115

Operating system: Windows 7

Device Platform: Desktop

Date tested: 3 months ago

Benchmark engine: Benchmark.js

setAttribute

1.9M/s

style.cssText

121K/s

style

43K/s

View exact numbers

HTML Preparation code:

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

Script Preparation code:

el = document.getElementById("test");

Tests:

style.cssText
el.style.cssText = "color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;";
style
el.style.height = '1vh'; el.style.width = '1vw'; el.style.color = 'red'; el.style.border = '1vmin solid red'; el.style.backgroundColor = 'black'; el.style.padding = '0.5vmin';
setAttribute
el.setAttribute('style',"color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;");