28

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
dasdasdasdasd
  • 1,249
  • 2
  • 11
  • 13

4 Answers4

44

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

Nasser Al-Shawwa
  • 3,573
  • 17
  • 27
  • Computed style with the transform property seems to return a transform matrix. – www139 Jan 31 '16 at 17:56
  • CSSWG recently resolved that getComputedStyle _should_ include the values of shorthand properties: https://github.com/w3c/csswg-drafts/issues/2529#issuecomment-402386896 – dgrogan Sep 15 '18 at 00:06
  • I used "margin" prop and it works in Chrome but not in FF, I changed it to "margin-top" and now it works everywhere, thanks – Anna Nov 20 '19 at 10:36
16
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

HIRA THAKUR
  • 17,189
  • 14
  • 56
  • 87
  • Nope, I tried this code, but problem is the same, Doesn't working in Mozilla Firefox – dasdasdasdasd Sep 07 '13 at 17:23
  • this code is tried and tested...there must be some problem with your code..can you come up with some more detail..or place the exact same code above and try it once..always remeber..its most diificult to debug a code when you consider evrything is perfect..atleast try it once.. – HIRA THAKUR Sep 07 '13 at 17:25
  • Here is my test [Project](http://bit.ly/17GVB9a) and in this project is imported "js/script.js", you can see my code – dasdasdasdasd Sep 07 '13 at 17:46
  • I had the problem, that internet explorer returned calculated px values, when the margin was set to 'auto'. All other browsers returned '0px'. Using your code I was able to fix it. Thanks! – Jan Paepke Jan 08 '15 at 18:21
1

I tried something like this and it is worKing for me in all browsers

var elem = document.createElement('div');

var t=document.createTextNode('M')
elem.appendChild(t);
document.body.appendChild(elem);

var myfontSize = getStyle(elem,"fontSize")
alert(myfontSize)

function getStyle(elem,prop){
if (elem.currentStyle) {
var res= elem.currentStyle.margin;
} else if (window.getComputedStyle) {
if (window.getComputedStyle.getPropertyValue){
var res= window.getComputedStyle(elem, null).getPropertyValue(prop)}
else{var res =window.getComputedStyle(elem)[prop] };
}
return res;
}
Gaurav
  • 821
  • 9
  • 11
  • 2
    You probably mean to change `currentStyle.margin` with `currentStyle[prop]`. Otherwise the code is somewhat messy too. Does any of your browsers have `window.getComputedStyle.getPropertyValue`? Why is one of the calls with argument `null` and the other is not? – Roland Pihlakas Feb 22 '15 at 01:22
  • The getPropertyValue(prop) call looks like the example here: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle , however, that method belongs to the CSSStyleDeclaration that is the return value from getComputedStyle. So, Roland, to answer your question, no browser will have window.getComputedStyle.getPropertyValue. – Perry Tew May 28 '18 at 18:45
1

Getting an attribute of this interface is equivalent to calling the getPropertyValue method of the CSSStyleDeclaration interface

http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration

The problem as David Flanagan precised in 'Javascript the definitive guide' is about computed styles only :

  • Shortcut properties are not computed, only the fundamental properties that they are based on. Don’t query the margin property, for example, but use marginLeft, marginTop, and so on.

And here's a stackoverflow answer to back this up.

user10089632
  • 5,216
  • 1
  • 26
  • 34