javascript - Unable to get value of margin property from result getComputedStyle

Question

The result of a getComputedStyle contains a property named "margin", but the property is always an empty string ("") in Mozilla Firefox or Apple Safari; however, in Internet Explorer (and Google Chrome) the margin property contains the expected value (even in IE 6). The same result is returned when using the getPropertyValue("margin") method of the returned object.

How can I get the computed value of the margin in Firefox and Safari?

var el = document.body.appendChild(document.createElement('div'));
el.style.margin = '2px';
console.log(getComputedStyle(el, null).margin === ""); // false in IE and Chrome
console.log(getComputedStyle(el, null).getPropertyValue("margin") === ""); // same

Answer 1

The getComputedStyle() function should not evaluate the values of shorthand properties (such as margin, padding), only longhand properties (such as margin-top, margin-bottom, padding-top). In the case of shorthand properties it should only return an empty string.

var el = document.body.appendChild(document.createElement('div'));
el.style.margin = '2px';
var computed = getComputedStyle(el);

var longhands = ['margin-top', 'margin-bottom', 'margin-left', 'margin-right'];
longhands.forEach(function(e) { console.log(e + ': ' + computed.getPropertyValue(e)) });