vanilla css (v2)

Revision 2 of this benchmark created by Dustin on

Preparation HTML

<div id="tester"></div>

Setup

var div = document.getElementById('tester');
    var customStyles = {
    width: '50px',
    height: '50px',
    transform: 'translateX(10px) scale(.9)'
    };

Test runner

Ready to run.

Testing in
TestOps/sec
with type check
function css(el, styles, val) {
    if (typeof(styles) === 'string') {
      var tmp = styles;
      styles = {};
      styles[tmp] = val;
    }

    for (var prop in styles) {
      el.style[prop] = styles[prop];
    }
  }

css(div, customStyles);
ready
no type check
function css(el, styles, val) {
    for (var prop in styles) {
      el.style[prop] = styles[prop];
    }
  }

css(div, customStyles)
ready
Object.keys
function css(el, styles, val) {
Object.keys(styles).forEach(function (k) {
el.style[k]= styles[k];
});
}

css(div, customStyles)
ready
Keys Cached Styles
function css(el, styles, val) {
var cache = el.style;
Object.keys(styles).forEach(function (k) {
cache[k]= styles[k];
});
}

css(div, customStyles)
ready
regex
function css(el, styles) {
    var elStyles = el.style.cssText;
    Object.keys(styles).forEach(function setStyle(k) {
      var r = new RegExp('(' + k + '): (.*);', 'i'),
          matches = elStyles.match(r),
          replacement = k + ': ' + styles[k] + ';';

      if (r.length === 3) {
        elStyles.replace(matches[0], replacement);
      }
      else {
        elStyles += replacement;
      }
    });
    el.style.cssText = elStyles;
}

css(div, customStyles)
ready

Revisions

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

  • Revision 1: published by Vanilla Css on
  • Revision 2: published by Dustin on