Maison  >  Article  >  interface Web  >  Comment changer la valeur de la marge dans jquery

Comment changer la valeur de la marge dans jquery

WBOY
WBOYoriginal
2022-06-09 16:35:012410parcourir

Dans jquery, vous pouvez utiliser la méthode css() pour modifier la valeur de la marge de l'élément. Cette méthode est utilisée pour renvoyer ou définir la valeur de l'attribut CSS de l'élément. la marge extérieure de l'élément. La syntaxe est "$(" Élément spécifié ").css("margin","valeur de marge modifiée");".

Comment changer la valeur de la marge dans jquery

L'environnement d'exploitation de ce tutoriel : système windows10, version jquery3.4.1, ordinateur Dell G3.

Comment modifier la valeur de la marge avec jquery

margin efface la zone d'élément environnante (bordure extérieure). La marge n’a pas de couleur de fond et est totalement transparente.

marge Vous pouvez modifier les marges supérieure, inférieure, gauche et droite de l'élément individuellement, ou vous pouvez modifier tous les attributs en même temps.

Comment changer la valeur de la marge dans jquery

Valeurs possibles

  • auto Définir les marges du navigateur.

  • length définit une marge fixe (en utilisant des pixels, pt, em, etc.)

  • % définit une marge en utilisant des pourcentages

La méthode css() définit ou renvoie un ou plusieurs des attributs de style des éléments sélectionnés .

Pour définir des propriétés CSS spécifiques, veuillez utiliser la syntaxe suivante :

css("propertyname","value");

L'exemple est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("margin","0px");
  });
});
</script>
<style>
p
{
background-color:yellow;
}
p.margin
{
margin:100px 50px;
}
</style>
</head>
<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
<button>设置 p 元素的margin </button>
</body>
</html>

Résultat de sortie :

Comment changer la valeur de la marge dans jquery

Tutoriel vidéo recommandé : Tutoriel vidéo jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn