web-dev-qa-db-fra.com

obtenir la taille de la marge d'un élément avec jquery

Comment puis-je obtenir les propriétés d'un élément avec jquery? Je veux obtenir la taille de la marge d'une div en particulier.

J'ai défini le style du div dans un fichier .css, par exemple,

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

le html,

<form>
...

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

...

</form>

J'ai essayé avec ce code, mais ça échoue évidemment,

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

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


});

des idées? Merci.

jquerycsshtml
47
laukok

La balise CSS "margin" est en fait un raccourci pour les quatre valeurs de marge distinctes, haut/gauche/bas/droite. Utilisez css('marginTop'), etc. - notez qu'ils auront 'px' à la fin si vous les avez spécifiés de cette façon.

Utilisez parseInt() autour du résultat pour le transformer en valeur numérique.

NB. Comme l'a noté Omaty, l'ordre de la balise raccourcie "margin" est: top right bottom left - la liste ci-dessus n'a pas été écrite d'une manière destinée à être l'ordre de la liste, juste une liste de celle spécifiée dans la balise.

89
Orbling

Vous aurez envie d'utiliser ...

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

Exemple, pour:

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

Dans ce code js:

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

Le var devient "15px", une chaîne.

Si vous voulez un entier, pour éviter NaN (pas un nombre), il y a plusieurs façons.

Le plus rapide est d'utiliser la méthode native js:

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

De site Web de jQuery

Les propriétés CSS abrégées (par exemple, marge, arrière-plan, bordure) ne sont pas prises en charge. Par exemple, si vous souhaitez récupérer la marge rendue, utilisez: $ (elem) .css ('marginTop') et $ (elem) .css ('marginRight'), etc.

6
Matthew J Morrison