Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
style.setProperty vs style.cssText vs style vs attributeStyleMap.set
(version: 0)
Comparing performance of:
style.setProperty vs style.cssText vs style vs attributeStyleMap.set
Created:
2 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id="test"></div>
Script Preparation code:
el = document.getElementById("test");
Tests:
style.setProperty
let i = 0; while (i < 10000) { el.style.setProperty("color","red"); el.style.setProperty("border","1vmin solid red"); el.style.setProperty("padding","0.5vmin"); el.style.setProperty("background-color","black"); el.style.setProperty("height","1vh"); el.style.setProperty("width","1vw"); i++; }
style.cssText
let i = 0; while (i < 10000) { el.style.cssText = "color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;"; i++; }
style
let i = 0; while (i < 10000) { el.style = "color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;"; i++; }
attributeStyleMap.set
let i = 0; while (i < 10000) { el.attributeStyleMap.set("color","red"); el.attributeStyleMap.set("border","1vmin solid red"); el.attributeStyleMap.set("padding","0.5vmin"); el.attributeStyleMap.set("background-color","black"); el.attributeStyleMap.set("height","1vh"); el.attributeStyleMap.set("width","1vw"); i++; }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
style.setProperty
style.cssText
style
attributeStyleMap.set
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
6 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36 OPR/122.0.0.0
Browser/OS:
Opera 122 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=619302" width="100%" height="500px"></iframe>
Test name
Executions per second
style.setProperty
37.7 Ops/sec
style.cssText
42.1 Ops/sec
style
37.2 Ops/sec
attributeStyleMap.set
12.0 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what is being tested. The benchmark compares four different approaches to set CSS styles on an HTML element: 1. `style.setProperty`: This method sets a property value for a style declaration using the syntax `style.setProperty('name', 'value')`. It allows you to specify both the name of the property and its associated value, separated by a double quote. 2. `style.cssText`: This property allows you to set multiple CSS styles in a single string, separated by semicolons. The format is `"color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;"`. 3. `style`: This method sets the style declaration for an element using a string, similar to `style.cssText`. However, it does not support multiple styles in a single string. 4. `attributeStyleMap.set`: This method allows you to set CSS properties on an element as attributes on the DOM node itself, rather than through the `style` property. The format is `"color":"red"`, `"border":"1vmin solid red"`, etc. Now, let's discuss the pros and cons of each approach: **Pros:** * `style.setProperty`: This method provides more flexibility when setting multiple styles for an element, as it allows you to separate style names from values. * `attributeStyleMap.set`: This method can be faster if the browser does not need to parse or execute JavaScript code for the given styles. Cons: * `style.setProperty` may require more code and is less flexible than other methods when dealing with multiple styles. * `attributeStyleMap.set` requires setting individual properties as attributes on the DOM node, which might lead to issues if you don't have control over the HTML source code or need to dynamically change the style. **Pros:** * `style.cssText`: This method is easy to use and concise, especially when dealing with a single set of styles. * `style`: Similar to `style.cssText`, but less flexible due to its limited support for multiple styles in a single string. Cons: * Both methods have limitations when it comes to setting multiple styles or accessing properties dynamically. **Other considerations:** * When using `attributeStyleMap.set`, you need to be aware that the browser may not always parse these attributes as CSS, especially if they are dynamically generated. * In modern browsers, all three approaches (except for `style` and `attributeStyleMap.set`) support shorthand properties like `border` or `background-color`. These can simplify the code but require careful consideration when setting multiple values. **Additional notes on library usage:** None of the methods in this benchmark rely on a specific JavaScript library. However, it's essential to note that these methods may be subject to variations depending on the browser and its implementation of the respective CSS features. In terms of special JS features or syntax: This benchmark does not use any special JavaScript features, other than the standard ECMAScript syntax used for defining functions, variables, and control flow statements. The code should be executable in most modern environments without requiring additional setup or dependencies.
Related benchmarks:
6 properties - style.setProperty vs attributeStyleMap.set
Setting CSS: Direct CSS property vs setAttribute("style",...)
style.setProperty vs style.cssText vs style vs attributeStyleMap.set 2
style.setProperty vs style.cssText vs style vs attributeStyleMap.set 3
Comments
Confirm delete:
Do you really want to delete benchmark?