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)) });

In addition, you can take a look at this link for a cross-browser solution, which uses currentStyle for internet explorer

Answer 2

var elem = document.getElementById("your-div"); if (elem.currentStyle) {     var margin = elem.currentStyle.margin; } else if (window.getComputedStyle) {     var margin = window.getComputedStyle(elem, null).getPropertyValue("margin"); }  alert(margin); 

you can use this shim,works for all browsers:refer this

use currentStyle for Internet Explorer.

use getComputedStyle for other browsers