Run results for: Set style vs setAtrribute("style") 5

Run details:

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

Browser: Chrome 81

Operating system: Mac OS X 10.15.3

Device Platform: Desktop

Date tested: 4 years ago

Test name	Executions per second
setProperty Single Random Value	153949.4 Ops/sec
setProperty All Random Values	93369.4 Ops/sec
setAttribute Fixed Values	209452.2 Ops/sec
setAttribute Single Random Value	136430.2 Ops/sec
setAttributey All Random Values	102426.9 Ops/sec
Style by name Fixed Values	166646.0 Ops/sec
Style by name Single Random Value	129880.5 Ops/sec
Style by name All Random Values	79795.5 Ops/sec
Style by property Fixed Values	173988.7 Ops/sec
Style by property Single Random Value	128033.1 Ops/sec
Style by property All Random Values	79424.8 Ops/sec

HTML Preparation code:

<div id="element" style="background:#555;color:#FFF;position:absolute;left:0;top:0;width:400px;height:100px;">
</div>

Script Preparation code:

  var elem = document.getElementById('element');
function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

Tests:

setProperty Single Random Value
elem.style.setProperty('width', getRandomInt(500) + 'px'); elem.style.setProperty('height', '50px'); elem.style.setProperty('top', '40px'); elem.style.setProperty('left', '90px');
setProperty All Random Values
elem.style.setProperty('width', getRandomInt(500) + 'px'); elem.style.setProperty('height', getRandomInt(50) + 'px'); elem.style.setProperty('top', getRandomInt(40) + 'px'); elem.style.setProperty('left', getRandomInt(90) + 'px');
setAttribute Fixed Values
elem.setAttribute('style','width:500px;height:50px;top:40px;left:90px;');
setAttribute Single Random Value
elem.setAttribute('style','width:' + getRandomInt(500) + 'px;height:50px;top:40px;left:90px;');
setAttributey All Random Values
elem.setAttribute('style','width:' + getRandomInt(500) + 'px;height:' + getRandomInt(50) + 'px;top:' + getRandomInt(40) + 'px;left:' + getRandomInt(90) + 'px;');
Style by name Fixed Values
elem.style['width'] = '500px'; elem.style['height'] = '50px'; elem.style['top'] = '40px'; elem.style['left'] = '90px';
Style by name Single Random Value
elem.style['width'] = getRandomInt(500) + 'px'; elem.style['height'] = '50px'; elem.style['top'] = '40px'; elem.style['left'] = '90px';
Style by name All Random Values
elem.style['width'] = getRandomInt(500) + 'px'; elem.style['height'] = getRandomInt(50) + 'px'; elem.style['top'] = getRandomInt(40) + 'px'; elem.style['left'] = getRandomInt(90) + 'px';
Style by property Fixed Values
elem.style.width = '500px'; elem.style.height = '50px'; elem.style.top = '40px'; elem.style.left = '90px';
Style by property Single Random Value
elem.style.width = getRandomInt(500) + 'px'; elem.style.height = '50px'; elem.style.top = '40px'; elem.style.left = '90px';
Style by property All Random Values
elem.style.width = getRandomInt(500) + 'px'; elem.style.height = getRandomInt(50) + 'px'; elem.style.top = getRandomInt(40) + 'px'; elem.style.left = getRandomInt(90) + 'px';

Run results for: Set style vs setAtrribute("style") 5

setProperty Single Random Value

setProperty All Random Values

setAttribute Fixed Values

setAttribute Single Random Value

setAttributey All Random Values

Style by name Fixed Values

Style by name Single Random Value

Style by name All Random Values

Style by property Fixed Values

Style by property Single Random Value

Style by property All Random Values