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/605.1.15 (KHTML, like Gecko) Version/16.5.2 Safari/605.1.15

Browser: Safari 16

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');