Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Setting CSS: Direct CSS property vs setAttribute("style",...)
(version: 0)
Which one is more efficiente setAttribute("style","color:red") or a.style.color = 'red'
Comparing performance of:
setAttribute vs CSS properties
Created:
3 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<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';
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
setAttribute
CSS properties
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64; rv:139.0) Gecko/20100101 Firefox/139.0
Browser/OS:
Firefox 139 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=610948" width="100%" height="500px"></iframe>
setAttribute
4.7M/s
CSS properties
783K/s
View exact numbers
Test name
Executions per second
✓
setAttribute
4,725,595 Ops/sec
CSS properties
783,013 Ops/sec
Autogenerated LLM Summary
(model
gemma2:9b
, generated one year ago):
This benchmark tests the performance of two methods for setting the text color of an HTML element: * **`setAttribute("style", "color:red")`:** This method uses the `setAttribute()` function to set the "style" attribute of the element with the value "color:red". * **`a.style.color = 'red'`:** This method directly accesses the `style` object of the element and sets the `color` property to 'red'. **Pros and Cons:** * **`setAttribute("style", ...)`:** * **Pro:** More generic, can set various CSS properties at once. * **Con:** Potentially slower as it involves parsing and manipulating the "style" attribute string. * **`a.style.color = 'red'`:** * **Pro:** Generally faster as it directly manipulates the element's style object. * **Con:** Less versatile, only applicable to setting individual CSS properties. **Other Considerations:** * **Browser Compatibility:** Both methods are widely supported by modern browsers. * **Maintainability:** The `a.style.color = 'red'` approach is generally considered more readable and maintainable for simple style changes. **Alternatives:** * **CSS Classes:** Define CSS classes in your stylesheet and apply them to the element using the `className` property. This provides better organization and reusability of styles. * **Inline Styles (Less Recommended):** Embed styles directly within the HTML tag using the `style` attribute. However, this can lead to code bloat and decreased maintainability. This benchmark helps you understand which method performs better in your specific browser environment for setting a simple text color.
Related benchmarks
id vs setAttribute
style➜display VS setAttribute➜display
Set Prop Varaible vs setAttribute
Comments
Confirm delete:
Do you really want to delete benchmark?