Hinzufügen von Stil zu einem Element mithilfe von jQuery

Im heutigen Beitrag wird das Hinzufügen von Stilen zu einem Element mit jQuery erörtert.

Verwenden Sie .css(), um einem Element mithilfe von jQuery Stil hinzuzufügen

jQuery bietet eine einfache Möglichkeit, einem Element mithilfe von .css() einen Stil hinzuzufügen, um eine oder mehrere CSS-Eigenschaften für einen Satz übereinstimmender Elemente festzulegen. Dieser Ansatz kann einen Eigenschaftsnamen und -wert als separate Parameter oder als einzelnes Objekt aus Schlüssel-Wert-Paaren annehmen.

Syntax:

.css(propertyName, value)

Wo:

• propertyName ist eine Zeichenfolge, die den Namen der CSS-Eigenschaft darstellt.
• Wert ist eine Zeichenfolge oder Zahl, die den für die Eigenschaft festzulegenden Wert darstellt.

jQuery kann CSS- und DOM-Formatierungen von Mehrworteigenschaften gleichermaßen interpretieren. Zum Beispiel versteht jQuery den richtigen Wert für:

.css({'background-color': '#fefefe', 'border-right': '2px solid #eee'})

Und

.css({backgroundColor: '#fefefe', borderRight: 'solid 2px #eee'})

In der DOM-Notation sind Anführungszeichen um Eigenschaftsnamen optional verfügbar; und in CSS-Notation sind sie aufgrund des Bindestrichs im Namen erforderlich. Während .css() als Setter verwendet wird, modifiziert jQuery die Style-Eigenschaft eines Elements.

Das Aktualisieren/Festlegen des Werts einer Stileigenschaft auf eine leere Zeichenfolge, z. B. $( "#div-1" ).css( "color", "" ), entfernt die Eigenschaft von einem Element, wenn sie bereits angewendet wurde direkt, entweder im HTML-Stilattribut, über die jQuery-Methode .css() oder durch direkte DOM-Manipulation der Stileigenschaft.

Als Ergebnis wird der Stil des Elements für diese Eigenschaft auf den angewendeten Wert zurückgesetzt. Daher kann diese Methode alle Stiländerungen rückgängig machen, die Sie zuvor vorgenommen haben. Zudem unterstützt .css() wichtige Deklarationen nicht.

Der Setter .css() kümmert sich automatisch um das Präfix des Eigenschaftsnamens. Weitere Informationen finden Sie in der .css()-Dokumentation für .css().

Lassen Sie es uns anhand des folgenden Beispiels verstehen.

Beispielcode (HTML):

<div>Hello World!</div>

Beispielcode (JavaScript):

$('div').css({
  display: 'block',
  color: 'blue',
})

Wir haben im obigen Beispielcode ein div-Tag ohne angewendetes Styling beschrieben. Über jQuery setzen wir die Farbe des div auf blue und die Anzeige auf block.

Versuchen Sie, das obige Code-Snippet in einem beliebigen Browser auszuführen, der jQuery unterstützt. Es wird das folgende Ergebnis angezeigt.

Vor dem Hinzufügen einer CSS-Eigenschaft haben wir die folgende Ausgabe:

Nach dem Hinzufügen einer CSS-Eigenschaft wird dies zu:

Sie können die Live-Demo des obigen Beispielcodes hier ansehen.