使用jquery获取元素的边距大小

Question

如何使用jquery获取元素的属性？我想特别得到div的边距大小.

我已经在.css文件中设置了div的样式,例如,

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

HTML,

<form>
...

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

...

</form>

我尝试使用此代码,但显然失败了,

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

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


});

有任何想法吗？谢谢.

Answer 1

CSS标签'margin'实际上是四个单独边距值的缩写,上/左/下/右.使用css('marginTop')等 - 请注意,如果你这样指定它们,它们最后会有'px'.

使用parseInt()结果将其转换为数字值.

NB.正如Omaty所指出的,简写'margin'标签的顺序是:top right bottom left- 上面的列表不是以列表顺序的方式编写的,只是标签中指定的列表.

Answer 2

你会想用......

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', '')));

Answer 3

例如:

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

在这个js代码中:

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

var变为"15px",一个字符串.

如果你想要一个Integer,为了避免NaN(非数字),有多种方法.

最快的是使用原生的js方法:

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

Answer 4

来自jQuery的网站

不支持速记CSS属性(例如边距,背景,边框).例如,如果要检索渲染边距,请使用:$(elem).css('marginTop')和$(elem).css('marginRight'),依此类推.