Heim > Artikel > Web-Frontend > So ändern Sie den Stil in JQuery
So ändern Sie den Stil von jquery: 1. Verwenden Sie css(), um einen neuen Stil für das angegebene Element festzulegen. Die Syntax „$(selector).css({“Attribute name 1“: „Attribute value 1“,“ Attributname 2: „Attributwert 2“, ...})“ 2. Verwenden Sie attr(), um den Stilattributwert des angegebenen Elements festzulegen. Die Syntax lautet „$(selector).attr(“style“, „Attributname 1: Attributwert 1; Attributname 2: Attributwert 3;...“)“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.6-Version, Dell G3-Computer.
Es gibt zwei Möglichkeiten, den Stil von jquery zu ändern:
Ändern Sie es mit der CSS()-Methode
Ändern Sie es mit der attr()-Methode
Methode 1: Verwenden Sie CSS ()-Methode
Diecss()-Methode kann ein oder mehrere Stilattribute des übereinstimmenden Elements festlegen.
Verwenden Sie einfach die Methode css(), um einen neuen Stil festzulegen
Syntax:
$(selector).css({"属性名1":"属性值1","属性名2":"属性值2",...})
Beispiel:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-3.6.3.min.js"></script> <script> $(document).ready(function() { $("button").on("click", function() { $("div").css({"color":"red","background-color":"papayawhip","font-size":"25px"}); }); }); </script> <style> .tr1 { color: green; } .tr2 { color: red; background-color: blanchedalmond; } </style> </head> <body class="ancestors"> <div style="color: yellow;background-color:powderblue;">欢迎来到PHP中文网!</div><br> <button>改变div元素的style样式</button> </body> </html>
Methode 2: Verwenden Sie die Methode attr()
attr()-Methode zum Festlegen oder Zurückgeben der ausgewählte Der Attributwert des Elements.
Verwenden Sie einfach die Methode attr(), um den Stilattributwert des Elements festzulegen.
Grammatik:
$(selector).attr("style","属性名1:属性值1;属性名2:属性值3;...")
Beispiel:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-3.6.3.min.js"></script> <script> $(document).ready(function() { $("button").on("click", function() { $("div").attr("style", "color:pink;background-color:peru;font-size: 18px;"); }); }); </script> <style> .tr1 { color: green; } .tr2 { color: red; background-color: blanchedalmond; } </style> </head> <body class="ancestors"> <div style="color: red;background-color:papayawhip;">欢迎来到PHP中文网!</div><br> <button>改变div元素的style样式</button> </body> </html>
[Empfohlenes Lernen: jQuery-Video-Tutorial, Web-Frontend-Video]
Das obige ist der detaillierte Inhalt vonSo ändern Sie den Stil in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!