使用jquery获取元素的边距大小[重复]答案

【问题标题】：get the margin size of an element with jquery [duplicate]使用jquery获取元素的边距大小[重复]
【发布时间】：2011-05-12 07:07:11
【问题描述】：

如何使用 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"));


});

有什么想法吗？谢谢。

【问题讨论】：

标签： jquery css html

【解决方案1】：

CSS 标签“边距”实际上是四个独立边距值的简写，上/左/下/右。使用css('marginTop') 等 - 请注意，如果您以这种方式指定它们，它们的末尾会有“px”。

在结果周围使用parseInt() 将其转换为数值。

注意。正如 Omaty 所指出的，速记“margin”标签的顺序是：top right bottom left - 上面的列表并不是按照列表顺序编写的，只是在标签。

【讨论】：

magin 属性的正确顺序是：top right bottom left 来源：http://www.w3schools.com/css/css_margin.asp
哇，我不知道 parseInt('45 gobbledeygook');产生了 45。JavaScript，你疯了！
@WillMorgan：它可以很好地处理整数部分之后的垃圾，但只允许它之前的空格。
请注意，在 IE7/8 中，如果您的边距未明确设置为 .css('marginTop') 将返回 auto 而不是 0px。所以当你运行 parseFloat 或 parseInt 你会得到 Nan.
@EasyCo：好点。 IE7 的margin-top 实现通常存在错误，因此在处理该浏览器时总是值得警惕。

【解决方案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', '')));

【讨论】：

这太棒了！非常感谢！
-1 这将在尝试将其添加到整数时导致字符串连接。
而正确答案是..... alert(parseInt($this.parents("div:.item-form").css("marginTop"),10));跨度>

【解决方案3】：

来自jQuery's website

简写的 CSS 属性（例如，边距，背景、边框）不受支持。例如，如果您想检索渲染的边距，使用： $(elem).css('marginTop') 和 $(elem).css('marginRight') 等等。

【讨论】：

知道了，非常感谢:)

【解决方案4】：

例如，对于：

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

在这个js代码中：

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

var 变成了“15px”，一个字符串。

如果你想要一个整数，为了避免 NaN（不是数字），有多种方法。

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

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

【讨论】：