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

javascript margin
YuC picture YuC · Jan 11, 2013 · Viewed 97.1k times · Source

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

T.J. Crowder picture T.J. Crowder · Jan 11, 2013

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

Related questions

jQuery animate margin top

I have a script on jsfiddle: http://jsfiddle.net/kX7b6/ Nothing happens on hover On hover I want the green box to overlap the red box with a negative margin -50px. Nothing happens. The animation works, but not …

Read More
Get position of element by JavaScript

I've seen dozens of scripts that can catch the x and y position of an element/object within the page. But I am always having trouble with catching the x and y when the webpage is using margins at the …

Read More
How can I remove a specific item from an array?

I have an array of numbers and I'm using the .push() method to add elements to it. Is there a simple way to remove a specific element from an array? I'm looking for the equivalent of something like: array.remove(…

Read More