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

T.J. Crowder · Accepted Answer · 2013-01-11T09:47:40.997

159

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

edited Jan 11 '13 at 09:47

answered Jan 11 '13 at 09:41

T.J. Crowder

1,031,962
187
1,923
1,875

1

Thank you T.J., i tried on FF and Chrome, it works. I thought `getComputedStyle()` was a method of element node at first, turns out it is a method of `window`. I would try on IE later. – YuC Jan 14 '13 at 01:35
As you said, this only works when original unit is in 'px'. Do you have any solution to get the real value? – vsync May 09 '14 at 22:14
1

@vsync: No, it works regardless of the original value's units, but what you *receive* may well be (or may not be) in pixels instead. I'm not aware of a way to reliably get a non-pixels value short of working through the CSS rules yourself. – T.J. Crowder May 09 '14 at 22:48
3

The method `getComputedStyle()` will always return "resolved values", i.e. it always returns a pixel value, regardless of the unit used in the CSS rule – Philipp Feb 25 '21 at 21:25

Fabio Montefuscolo · Answer 2 · 2015-03-24T16:01:33.913

12

Also, you can create your own outerHeight for HTML elements. I don't know if it works in IE, but it works in Chrome. Perhaps, you can enhance the code below using currentStyle, suggested in the answer above.

Object.defineProperty(Element.prototype, 'outerHeight', {
    'get': function(){
        var height = this.clientHeight;
        var computedStyle = window.getComputedStyle(this); 
        height += parseInt(computedStyle.marginTop, 10);
        height += parseInt(computedStyle.marginBottom, 10);
        height += parseInt(computedStyle.borderTopWidth, 10);
        height += parseInt(computedStyle.borderBottomWidth, 10);
        return height;
    }
});

This piece of code allow you to do something like this:

document.getElementById('foo').outerHeight

According to caniuse.com, getComputedStyle is supported by main browsers (IE, Chrome, Firefox).

edited Mar 24 '15 at 16:01

answered Aug 07 '14 at 20:08

Fabio Montefuscolo

2,258
2
21
18

I don't think IE supports window.getComputedStyle method, thanks anyway. – YuC Aug 18 '14 at 10:34
`getComputedStyle` is available for IE ≥ 9 – Fabio Montefuscolo Aug 19 '14 at 21:19
3

But i am living in a country where you must deal with IE6 (┬＿┬) – YuC Aug 20 '14 at 06:52
1

getComputedStyle is very slow. You should avoid needlessly recalling it like this. – Joseph Lennox Mar 23 '15 at 19:23
@JosephLennox do you know how does jQuery do? – YuC Feb 23 '16 at 01:44

score 9 · Answer 3 · edited Aug 28 '20 at 11:32

I found something very useful on this site when I was searching for an answer on this question. You can check it out at http://www.codingforums.com/javascript-programming/230503-how-get-margin-left-value.html. The part that helped me was the following:

/***
 * get live runtime value of an element's css style
 *   http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element
 *     note: "styleName" is in CSS form (i.e. 'font-size', not 'fontSize').
 ***/
var getStyle = function(e, styleName) {
  var styleValue = "";
  if (document.defaultView && document.defaultView.getComputedStyle) {
    styleValue = document.defaultView.getComputedStyle(e, "").getPropertyValue(styleName);
  } else if (e.currentStyle) {
    styleName = styleName.replace(/\-(\w)/g, function(strMatch, p1) {
      return p1.toUpperCase();
    });
    styleValue = e.currentStyle[styleName];
  }
  return styleValue;
}
////////////////////////////////////
var e = document.getElementById('yourElement');
var marLeft = getStyle(e, 'margin-left');
console.log(marLeft);    // 10px

#yourElement {
  margin-left: 10px;
}

<div id="yourElement"></div>

Thanks, your method is similar to T.J. Crowder, but you wrap it into a function. ^_^ — YuC, Dec 31 '15 at 06:56

GAURAV JOSHI · Answer 4 · 2021-06-20T15:08:53.597

Here is my solution:

Step 1: Select the element

Step 2: Use getComputedStyle and provide the element to it

Step 3: Now access all the properties

const item = document.getElementbyId('your-element-id');
const style= getComputedStyle(item);
const itemTopmargin = style.marginTop;
console.log(itemTopmargin)

It will give you margin with px units like "16px" which you might not want. You can extract the value using parseInt()

const marginTopNumber = parseInt(itemTopmargin)
console.log(marginTopNumber)

It will give you the numerical value only (without any units).

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

4 Answers4

Linked