Benchmark: style.setProperty vs style.cssText vs style vs attributeStyleMap.set vs style.prop

HTML Preparation code:

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

Script Preparation code:

el = document.getElementById("test");

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
style.setProperty
style.cssText
style
attributeStyleMap.set
style.prop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 135 on Windows

View result in a separate tab

style.cssText

693K/s

style

601K/s

style.setProperty

562K/s

style.prop

551K/s

attributeStyleMap.set

216K/s

View exact numbers

Test name	Executions per second
✓ style.cssText	692,596 Ops/sec
style	600,811 Ops/sec
style.setProperty	561,716 Ops/sec
style.prop	550,925 Ops/sec
attributeStyleMap.set	215,621 Ops/sec

style.setProperty vs style.cssText vs style vs attributeStyleMap.set vs style.prop (version: 1)

Comparing performance of: `style.setProperty vs style.cssText vs style vs attributeStyleMap.set vs style.prop`

Created: one year ago by: Registered User

Go to the latest result

style.setProperty

style.cssText

style

attributeStyleMap.set

style.prop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

style.setProperty vs style.cssText vs style vs attributeStyleMap.set vs style.prop (version: 1)

Comparing performance of: style.setProperty vs style.cssText vs style vs attributeStyleMap.set vs style.prop

Created: one year ago by: Registered User

Go to the latest result

style.setProperty

style.cssText

style

attributeStyleMap.set

style.prop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `style.setProperty vs style.cssText vs style vs attributeStyleMap.set vs style.prop`