Benchmark: change css property

HTML Preparation code:

<div id='id'></div>

Script Preparation code:

var el = document.getElementById('id');

Tests:

setProperty method
el.style.setProperty('font-size', '14px') el.style.setProperty('color', 'blue') el.style.setProperty('font-size', '16px') el.style.setProperty('color', 'red')
set property
el.style.fontSize = '14px' el.style.color = 'blue' el.style.fontSize = '16px' el.style.color = 'red'
change cssText
el.style.cssText = 'font-size: 14px; color: red' el.style.cssText = 'font-size: 14px; color: blue' el.style.cssText = 'font-size: 16px; color: blue' el.style.cssText = 'font-size: 16px; color: red'
add cssText
el.style.cssText += 'font-size: 14px' el.style.cssText += 'color: blue' el.style.cssText += 'font-size: 16px' el.style.cssText += 'color: red'
change multi cssText
el.style.cssText = 'font-size: 14px; color: blue' el.style.cssText = 'font-size: 16px; color: red'
setAttribute method
el.setAttribute('style', 'font-size: 14px; color: red') el.setAttribute('style', 'font-size: 14px; color: blue') el.setAttribute('style', 'font-size: 16px; color: blue') el.setAttribute('style', 'font-size: 16px; color: red')
multi setAttribute method
el.setAttribute('style', 'font-size: 14px; color: blue') el.setAttribute('style', 'font-size: 16px; color: red')

Rendered benchmark preparation results:

Previous results

ⓘ Get performance results from real users on your website with Request Metrics.

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36 Edg/96.0.1054.41

Browser/OS: Chrome 96 on Windows

change css property (version: 3)