Heim >Web-Frontend >Front-End-Fragen und Antworten >Kann JQuery CSS-Stile hinzufügen?
jquery kann einen CSS-Stil hinzufügen. Methode: 1. Verwenden Sie css(), um das Stilattribut des passenden Elements festzulegen. Die Syntax lautet „$(selector).css (attribute name, attribute value)“; ) lautet die Syntax „$(selector).attr(“style“,“style code“)“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.
jquery kann CSS-Stile hinzufügen Sie können beispielsweise die Methode css() verwenden, um CSS-Stile hinzuzufügen, oder die Methode attr() verwenden, um CSS-Inline-Stile hinzuzufügen, indem Sie das Stilattribut festlegen.
jquery-Methode zum Hinzufügen eines CSS-Stils
1. Verwenden Sie die Methode css()
css(), um ein oder mehrere Stilattribute des passenden Elements zurückzugeben oder festzulegen.
Syntax zum Festlegen von CSS-Stilen
$(selector).css(name,value)
Parameter | Beschreibung |
---|---|
Name | Erforderlich. Gibt den Namen der CSS-Eigenschaft an. Dieser Parameter kann eine beliebige CSS-Eigenschaft enthalten, beispielsweise „color“. |
Wert |
Optional. Gibt den Wert einer CSS-Eigenschaft an. Dieser Parameter kann einen beliebigen CSS-Eigenschaftswert enthalten, beispielsweise „red“. Wenn der leere Zeichenfolgenwert festgelegt ist, wird das angegebene Attribut aus dem Element entfernt. |
Beispiel:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { $("p").css("color", "red"); }); }); </script> </head> <body> <p>这是一个段落</p> <p>这是另一个段落</p> <button>改变段落的颜色</button> </body> </html>
2. Verwenden Sie die Methode attr()
attr(), um den Attributwert des ausgewählten Elements festzulegen oder zurückzugeben.
Wenn Sie die Methode attr() verwenden, um das Stilattribut eines Elements festzulegen, können Sie dem Element CSS-Stile hinzufügen.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function() { $("button").click(function() { // $("div").attr({"style":"border: 5px solid paleturquoise;"}); $("div").attr("style", "border: 5px solid paleturquoise;width: 200px;"); }); }); </script> </head> <body> <div>hello</div> <br> <button>给div元素添加css样式</button> </body> </html>
【Empfohlenes Lernen: jQuery-Video-Tutorial, Web-Frontend-Einführungsvideo】
Das obige ist der detaillierte Inhalt vonKann JQuery CSS-Stile hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!