Run results for: style.setProperty vs style.cssText vs style vs attributeStyleMap.set vs style.prop

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser: Chrome 135

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 3 days ago

HTML Preparation code:

<div id="test"></div>

Script Preparation code:

el = document.getElementById("test");

Tests:

style.setProperty
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");
style.cssText
el.style.cssText = "color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;";
style
el.style = "color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;";
attributeStyleMap.set
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");
style.prop
el.style.color = "red"; el.style.border = "1vmin solid red"; el.style.padding = "0.5vmin"; el.style.backgroundColor = "black"; el.style.height = "1vh"; el.style.width = "1vw";