Run results for: el.style vs cached style vs el.style.setProperty vs cached style.setProperty

Run details:

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

Browser: Chrome 114

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

HTML Preparation code:

<div></div>

Script Preparation code:

const el = document.querySelector('div');
obj = {
  el: el,
  style: el.style,
  propWidth: 'width',
  propHeight: 'height',
}

Tests:

el.style
const style = obj.el.style; style[obj.propWidth] = Math.random() + 'px'; style[obj.propHeight] = Math.random() + 'px';
style
const style = obj.style; style[obj.propWidth] = Math.random() + 'px'; style[obj.propHeight] = Math.random() + 'px';
el.style.setProperty
const style = obj.el.style; style.setProperty(obj.propWidth, Math.random() + 'px'); style.setProperty(obj.propHeight, Math.random() + 'px');
style.setProperty
const style = obj.style; style.setProperty(obj.propWidth, Math.random() + 'px'); style.setProperty(obj.propHeight, Math.random() + 'px');