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
- WBOYoriginal
- 2022-09-09 15:50:152448parcourir
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");".
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 :
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!