Run results for: setProperty vs style vs cssText

Run details:

User agent: Mozilla/5.0 (X11; CrOS x86_64 14092.66.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.95 Safari/537.36

Browser: Chrome 93

Operating system: Chrome OS 14092.66.0

Device Platform: Desktop

Date tested: 3 years ago

HTML Preparation code:

<div id="foo"></div>

Tests:

setProperty
var element = document.getElementById("foo"); var i = 10000; while (i--) { element.style.setProperty('transition', "none; transform:scale(1.05)"); element.style.setProperty('transform', "scale(1.05)"); element.style.setProperty('transition', ""); element.style.setProperty('transform', ""); }
style
var element = document.getElementById("foo"); var i = 10000; while (i--) { element.style.transition = "none"; element.style.transform = "scale(1.05)"; element.style.transition = ""; element.style.transform = ""; }
cssText
var element = document.getElementById("foo"); var i = 10000; while (i--) { element.style.cssText = "transition:none; transform:scale(1.05)"; element.style.cssText = ""; }