obtener el tamaño de margen de un elemento con jquery

Question

¿Cómo puedo obtener las propiedades de un elemento con jquery? Quiero obtener el tamaño del margen de un div en particular.

he puesto el estilo del div en un archivo .css, por ejemplo,

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

el html,

<form> 
... 

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

... 

</form> 

he intentado con este código, pero falla, obviamente,

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

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


}); 

¿Alguna idea? Gracias.

Answer 1

La etiqueta CSS 'margen' es en realidad una forma abreviada de los cuatro valores de margen separados, arriba/izquierda/abajo/derecha. Use css('marginTop'), etc., tenga en cuenta que tendrán 'px' en el extremo si los ha especificado de esa manera.

Utilice parseInt() para calcular el valor numérico.

NB. Como señaló Omaty, el orden de la etiqueta abreviada de 'margen' es: top right bottom left - la lista anterior no se escribió de forma que fuera el orden de la lista, solo una lista de las especificadas en la etiqueta.

Answer 2

Usted querrá usar ...

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

Answer 3

Desde jQuery's website

propiedades CSS en forma abreviada (por ejemplo margen, fondo, frontera) no son compatibles. Por ejemplo, si desea recuperar el margen rendido, utilice: $ (elem) css ('marginTop') y $ (elem) css ('marginRight'), y así sucesivamente.

Answer 4

Exemple, para:

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

En este js código:

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

La var se convierte en "15px", una cadena.

Si desea un Entero, para evitar NaN (No es un Número), hay varias formas.

El más rápido es utilizar el método nativo JS:

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