Benchmark: Setting CSS: Direct CSS property vs setAttribute("style",...)

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>

Previous results

Test case name	Result
setAttribute
CSS properties

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 months 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

Test name	Executions per second
setAttribute	4725595.0 Ops/sec
CSS properties	783012.6 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

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:

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

Jump to the latest result

setAttribute

CSS properties

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):