Heim > Artikel > Web-Frontend > So ändern Sie das Transformationsattribut eines Elements in jquery
So ändern Sie das Transformationsattribut eines Elements in jquery
- WBOYOriginal
- 2022-09-09 15:50:152448Durchsuche
In jquery können Sie die Methode css() verwenden, um das Transformationsattribut eines Elements zu ändern. Mit der Methode css() können Sie ein oder mehrere Stilattribute des ausgewählten Elements festlegen oder zurückgeben, und das Transformationsattribut kann verwendet werden Wird zum Festlegen der Drehung, Skalierung, Verschiebung oder Neigung des Elements verwendet. Die Syntax lautet „$(angegebenes Element).css(“transform“,“modifizierter Transformationsattributwert“);“.
Die Betriebsumgebung dieses Artikels: Windows 10-System, JQuery-Version 3.6.1, Dell G3-Computer.
Wie jquery das Transformationsattribut eines Elements ändert
Verwenden Sie die jQuery-css()-Methode
css()-Methode, um ein oder mehrere Stilattribute des ausgewählten Elements festzulegen oder zurückzugeben.
CSS-Eigenschaften zurückgeben
Um den Wert der angegebenen CSS-Eigenschaft zurückzugeben, verwenden Sie bitte die folgende Syntax:
css("propertyname");CSS-Eigenschaften festlegen
Um die angegebene CSS-Eigenschaft festzulegen, verwenden Sie bitte Folgendes Syntax:
css("propertyname","value");Das Transformationsattribut wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen.
Das Beispiel lautet wie folgt:
<!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>Ausgabeergebnis:
Verwandte Tutorial-Empfehlung: jQuery-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo ändern Sie das Transformationsattribut eines Elements in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!