MeasureThat.net

Run results for: Setting CSS: Direct CSS property vs setAttribute("style",...)

Which one is more efficiente setAttribute("style","color:red") or a.style.color = 'red'

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36
Chrome 129
Windows
Desktop
6 months ago
Test name Executions per second
setAttribute 6621586.0 Ops/sec
CSS properties 4452169.0 Ops/sec
HTML Preparation code:
AخA
 
1
<span id="testElement">Test text</span>
Script Preparation code:
 
var a = document.getElementById("testElement");
Tests:

  • setAttribute

     
    a.setAttribute("style","color:red");

  • CSS properties

     
    a.style.color = 'red';