style.setProperty vs brackets

Benchmark created by Carlos Vializ on

Preparation HTML

<div class="styleMe"></div>

Setup

const element = document.querySelector('.styleMe');
  const capRe = /([A-Z])/g;
  function setProperty(element, property, value, opt_units) {
  element.style.setProperty(
      property.replace(capRe, '-$1').toLowerCase(), 
      opt_units ? value + opt_units : value,
      null);
  }
  function brackets(element, property, value, opt_units) {
  element.style[property] = opt_units ? value + opt_units : value;
  }

Test runner

Ready to run.

Testing in
TestOps/sec
setProperty
setProperty(element, 'margin-left', '4', 'px');
setProperty(element, 'marginLeft', '0', 'px');
ready
brackets
brackets(element, 'margin-left', '4', 'px');
brackets(element, 'marginLeft', '0', 'px');
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by Carlos Vializ on