Benchmark: style.setProperty vs style.removeProperty vs style.cssPropertyName

HTML Preparation code:

<div id="el">Hello world</div>

Script Preparation code:

el = document.getElementById("el")
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')

Tests:

style.setProperty
el.style.setProperty('color', '') el.style.setProperty('border', '') el.style.setProperty('padding', '') el.style.setProperty('background-color', '') el.style.setProperty('height', '') el.style.setProperty('width', '')
style.removeProperty
el.style.removeProperty('color') el.style.removeProperty('border') el.style.removeProperty('padding') el.style.removeProperty('background-color') el.style.removeProperty('height') el.style.removeProperty('width')
style.cssPropertyName
el.style.color = '' el.style.border = '' el.style.padding = '' el.style.backgroundColor = '' el.style.height = '' el.style.width = ''

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
style.setProperty
style.removeProperty
style.cssPropertyName

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Browser/OS: Chrome 145 on Mac OS X 10.15.7

View result in a separate tab

style.cssPropertyName

3.2M/s

style.removeProperty

2.0M/s

style.setProperty

1.8M/s

View exact numbers

Test name	Executions per second
✓ style.cssPropertyName	3,187,209 Ops/sec
style.removeProperty	2,035,540 Ops/sec
style.setProperty	1,841,524 Ops/sec

style.setProperty vs style.removeProperty vs style.cssPropertyName (version: 1)

Comparing performance of: `style.setProperty vs style.removeProperty vs style.cssPropertyName`

Created: one year ago by: Registered User

Go to the latest result

style.setProperty

style.removeProperty

style.cssPropertyName

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

style.setProperty vs style.removeProperty vs style.cssPropertyName (version: 1)

Comparing performance of: style.setProperty vs style.removeProperty vs style.cssPropertyName

Created: one year ago by: Registered User

Go to the latest result

style.setProperty

style.removeProperty

style.cssPropertyName

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `style.setProperty vs style.removeProperty vs style.cssPropertyName`