Maison  >  Article  >  interface Web  >  Comment modifier l'attribut de transformation d'un élément en jquery

Comment modifier l'attribut de transformation d'un élément en jquery

WBOY
WBOYoriginal
2022-09-09 15:50:152442parcourir

Dans jquery, vous pouvez utiliser la méthode css() pour modifier l'attribut transform d'un élément ; la méthode css() peut être utilisée pour définir ou renvoyer un ou plusieurs attributs de style de l'élément sélectionné, et l'attribut transform peut être utilisé pour définir la rotation de l'élément., l'échelle, le déplacement ou l'inclinaison, la syntaxe est "$(specified element).css("transform","modified transform attribut value");".

Comment modifier l'attribut de transformation d'un élément en jquery

L'environnement d'exploitation de cet article : système Windows 10, jquery version 3.6.1, ordinateur Dell G3.

Comment jquery modifie l'attribut de transformation d'un élément

Utilisez la méthode jQuery css()

css() pour définir ou renvoyer un ou plusieurs attributs de style de l'élément sélectionné.

  • Renvoyer les propriétés CSS

Pour renvoyer la valeur de la propriété CSS spécifiée, veuillez utiliser la syntaxe suivante :

css("propertyname");
  • Définir les propriétés CSS

Pour définir la propriété CSS spécifiée, veuillez utiliser ce qui suit syntaxe :

css("propertyname","value");

L'attribut transform applique une transformation 2D ou 3D à un élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément.

L'exemple est le suivant :

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").css("transform","rotate(-9deg)");
  });
});
</script>
</head>
<style> 
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
<body>
<div>Hello World</div>
<button>设置div元素的transform属性</button>
</body>
</html>

Résultat de sortie :

Comment modifier lattribut de transformation dun élément en jquery

Recommandation de didacticiel associée : 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