Question

In some browsers (namely, Firefox) the getComputedStyle().getPropertyValue() doesn’t report anything for shorthand CSS, like border. Is there a non-specific-code way of getting these shorthand CSS values? I’ve considered making a whitelist of shorthand CSS and their respective longhand CSS values. But I realize doing that would be both a big pain and a non-forward-compatible design.

Answer 1

I’m wondering, what do you want to do with a string like border: 1px solid #000?

Say you want to reproduce an elems border in order to copy it copyStyle(el2, el, "border"):

// Copies a set of styles from one element to another.
function copyStyle(dest, source, shorthand) {
  var computed = window.getComputedStyle(source, null);
  for (var i = computed.length; i--;) {
    var property = camelize(computed[i]);
    if (property.indexOf(shorthand) > -1) {
      console.log(property)
      dest.style[property] = computed[property];
    }
  }
}

// prototype.js
function camelize(text) {
  return text.replace(/-+(.)?/g, function (match, chr) {
    return chr ? chr.toUpperCase() : '';
  });
}

Comparing if two element’s given set of styles matches can be done in the same manner. Other than that, I really can’t see the use a string, which should be parsed if you want to compute anything with it.