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

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:65.0) Gecko/20100101 Firefox/65.0

Browser: Firefox 65

Operating system: Mac OS X 10.13

Device Platform: Desktop

Date tested: 5 years ago

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:

style by property
elem.style.width = getRandomInt(500) + 'px'; elem.style.height = '50px'; elem.style.top = '40px'; elem.style.left = '90px'; i++;
style by name
elem.style['width'] = getRandomInt(500) + 'px'; elem.style['height'] = '50px'; elem.style['top'] = '40px'; elem.style['left'] = '90px';
setAttribute
elem.setAttribute("style","width:" + getRandomInt(500) + "px;height:50px;top:40px;left:90px;");