How to get margin value of a div in plain JavaScript?

Question

I can get height in jQuery with

$(item).outerHeight(true); 

but how do I with JS?

I can get the height of the li with

document.getElementById(item).offsetHeight 

but i will always get "" when I try margin-top:

document.getElementById(item).style.marginTop 

Answer 1

The properties on the style object are only the styles applied directly to the element (e.g., via a style attribute or in code). So .style.marginTop will only have something in it if you have something specifically assigned to that element (not assigned via a style sheet, etc.).

To get the current calculated style of the object, you use either the currentStyle property (Microsoft) or the getComputedStyle function (pretty much everyone else).

Example:

var p = document.getElementById("target"); var style = p.currentStyle || window.getComputedStyle(p);  display("Current marginTop: " + style.marginTop); 

Fair warning: What you get back may not be in pixels. For instance, if I run the above on a p element in IE9, I get back "1em".

Live Copy | Source