Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
style.setProperty vs style.cssText vs style vs attributeStyleMap.set 3
Go to the benchmark
Embed
Embed Benchmark Result
Run details:
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36
Browser:
Chrome 138
Operating system:
Mac OS X 10.15.7
Device Platform:
Desktop
Date tested:
9 months ago
Test name
Executions per second
style.setProperty
1075445.6 Ops/sec
style.cssText
955845.9 Ops/sec
style
865053.4 Ops/sec
attributeStyleMap.set
349724.4 Ops/sec
HTML Preparation code:
<div id="test"></div>
Script Preparation code:
el = document.getElementById("test"); style = el.style attributeStyleMap = el.attributeStyleMap color = 'red' border = '1vmin solid red' padding = '.5vmin' backgroundColor = 'black' height = '1vh' width = '1vw'
Tests:
style.setProperty
style.setProperty("color", color); style.setProperty("border", border); style.setProperty("padding", padding); style.setProperty("background-color", backgroundColor); style.setProperty("height", height); style.setProperty("width", width);
style.cssText
style.cssText = `color:${color};border:${border};padding:${padding};background-color:${backgroundColor};height:${height};width:${width};`;
style
el.style = `color:${color};border:${border};padding:${padding};background-color:${backgroundColor};height:${height};width:${width};`;
attributeStyleMap.set
attributeStyleMap.set("color",color); attributeStyleMap.set("border",border); attributeStyleMap.set("padding",padding); attributeStyleMap.set("background-color",backgroundColor); attributeStyleMap.set("height",height); attributeStyleMap.set("width",width);