So ändern Sie CSS-Stile mit JQuery

JQuery ist derzeit eine der beliebtesten JavaScript-Bibliotheken, die Entwicklern die Bedienung von HTML-Seiten erleichtern kann. Eine der grundlegendsten und am häufigsten verwendeten Funktionen ist die Verwendung von JQuery zum Ändern von CSS-Stilen.

1. Die grundlegende Syntax von JQuery zum Ändern des CSS-Stils

In JQuery verwenden wir die .css()-Methode, um den CSS-Stil des Elements zu ändern:

$(selector).css(property,value)

Darunter ist der Selektor das Element, das geändert werden muss, und Eigenschaft ist das Element, das geändert werden muss. CSS-Eigenschaft, Wert ist der neue Wert der Eigenschaft. Beispielsweise können wir die Hintergrundfarbe des Elements in Rot ändern:

$("#myDiv").css("background-color", "red");

2. So ändern Sie den CSS-Stil mit JQuery

1. Ändern Sie den CSS-Eigenschaftswert direkt

Wir können den Wert der CSS-Eigenschaft direkt festlegen auf einen neuen Wert durch Implementierung der .css()-Methode. Stellen Sie beispielsweise die Schriftfarbe auf Blau ein:

$("#myDiv").css("color", "blue");

Hinweis: Die Methode css() ändert nur den Inline-Stil des angegebenen Elements (d. h. den im Element-Tag geschriebenen Stil) und hat keinen Einfluss auf die Regeln von das externe Stylesheet.

2. CSS-Klassen wechseln

Wir können die Methode .addClass() verwenden, um eine CSS-Klasse zu einem Element hinzuzufügen, und die Methode .removeClass(), um eine CSS-Klasse zu entfernen. Das folgende Beispiel zeigt, wie Sie auf eine Schaltfläche klicken, um die Klasse eines Div umzuschalten:

$("#btnToggle").click(function(){
  $("#myDiv").toggleClass("active");
});

Die Methode .toggleClass() fügt den angegebenen Klassennamen hinzu oder löscht ihn.

3. Mehrere CSS-Eigenschaften festlegen

Wir können mehrere CSS-Eigenschaften und -Werte gleichzeitig festlegen, indem wir einfach ein Objekt in der .css()-Methode übergeben. Stellen Sie beispielsweise Rahmen, Breite, Höhe und Innenabstand gleichzeitig auf denselben Wert ein:

$("#myDiv").css({
  "border": "1px solid #000",
  "width": "50px",
  "height": "50px",
  "padding": "10px"
});

4. Den CSS-Eigenschaftswert abrufen

Wir können die Methode .css() verwenden, um den CSS-Eigenschaftswert des zu erhalten angegebenes Element. Rufen Sie beispielsweise die Hintergrundfarbe eines Elements ab:

var backgroundColor = $("#myDiv").css("background-color");

Mit der Methode .css() können wir den CSS-Stil von Seitenelementen flexibel ändern und abrufen, um umfassendere Benutzerinteraktionseffekte zu erzielen.

Das obige ist der detaillierte Inhalt vonSo ändern Sie CSS-Stile mit JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!