get the margin size of an element with jquery [duplicate]

How can I get the properties of an element with jquery? I want to get the size of the margin of a div in particular.

I have set the style of the div in a .css file, for instance,

.item-form {
  margin:0px 0px 10px 0px;
  background: blue;
}

the html,

<form>
...

<div class="item-form">
   <textarea class="autohide"></textarea>
</div>

...

</form>

I tried with this code, but it fails obviously,

$(".autohide").each(function(){

var $this = $(this);
alert($this.parents("div:.item-form").css("margin"));


});

any ideas? thanks.

Solution 1:

The CSS tag 'margin' is actually a shorthand for the four separate margin values, top/left/bottom/right. Use css('marginTop'), etc. - note they will have 'px' on the end if you have specified them that way.

Use parseInt() around the result to turn it in to the number value.

NB. As noted by Omaty, the order of the shorthand 'margin' tag is: top right bottom left - the above list was not written in a way intended to be the list order, just a list of that specified in the tag.

Solution 2:

You'll want to use...

alert(parseInt($this.parents("div:.item-form").css("marginTop").replace('px', '')));
alert(parseInt($this.parents("div:.item-form").css("marginRight").replace('px', '')));
alert(parseInt($this.parents("div:.item-form").css("marginBottom").replace('px', '')));
alert(parseInt($this.parents("div:.item-form").css("marginLeft").replace('px', '')));

Solution 3:

Exemple, for :

<div id="myBlock" style="margin: 10px 0px 15px 5px:"></div>

In this js code :

var myMarginTop = $("#myBlock").css("marginBottom");

The var becomes "15px", a string.

If you want an Integer, to avoid NaN (Not a Number), there is multiple ways.

The fastest is to use native js method :

var myMarginTop = parseInt( $("#myBlock").css("marginBottom") );

Solution 4:

From jQuery's website

Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.