Verwendung der css()-Methode von jQuery guide_jquery

Definition und Verwendung

Die Methode

css() gibt ein oder mehrere Stilattribute des übereinstimmenden Elements zurück oder legt es fest.

CSS-Eigenschaftswert zurückgeben

Gibt den CSS-Eigenschaftswert des ersten übereinstimmenden Elements zurück.

Hinweis: Kurzschrift-CSS-Eigenschaften (wie „Hintergrund“ und „Rahmen“) werden nicht unterstützt, wenn sie zur Rückgabe eines Werts verwendet werden.

Code kopieren Der Code lautet wie folgt:

$(selector).css(name)

Name erforderlich. Gibt den Namen der CSS-Eigenschaft an. Dieser Parameter kann eine beliebige CSS-Eigenschaft enthalten. Zum Beispiel „Farbe“.

Beispiel
Rufen Sie den Wert des Farbstilattributs des ersten Absatzes ab:

Code kopieren Der Code lautet wie folgt:

$("p").css("color");

CSS-Eigenschaften festlegen

Setzt die angegebene CSS-Eigenschaft für alle übereinstimmenden Elemente.

Code kopieren Der Code lautet wie folgt:

$(selector).css(name,value)

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
Setzen Sie die Farbe aller Absätze auf Rot:

Code kopieren Der Code lautet wie folgt:

$("p").css("color","red");

Verwenden Sie Funktionen, um CSS-Eigenschaften festzulegen

Legen Sie den Wert des Stilattributs in allen übereinstimmenden Elementen fest.
Diese Funktion gibt den festzulegenden Eigenschaftswert zurück. Akzeptiert zwei Parameter: Index ist die Indexposition des Elements in der Objektsammlung und Wert ist der ursprüngliche Attributwert.

Code kopieren Der Code lautet wie folgt:

$(selector).css(name,function(index,value))

Name erforderlich. Gibt den Namen der CSS-Eigenschaft an. Dieser Parameter kann eine beliebige CSS-Eigenschaft enthalten, beispielsweise „color“.

Code kopieren Der Code lautet wie folgt:

Funktion(Index,Wert)

Gibt eine Funktion an, die den neuen Wert einer CSS-Eigenschaft zurückgibt.
Index – optional. Akzeptiert die Indexposition des Selektors
alter Wert – optional. Akzeptiert den aktuellen Wert einer CSS-Eigenschaft.

Beispiel 1
Setzen Sie die Farbe aller Absätze auf Rot:

Code kopieren Der Code lautet wie folgt:

$("button").click(function(){
$("p").css("color",function(){return "red";});
});

Beispiel 2
Erhöhen Sie nach und nach die Breite des Div:

Code kopieren Der Code lautet wie folgt:

$("div").click(function() {
$(this).css(
„width“, function(index, value) {return parseFloat(value) * 1.2;}
);
});

Legen Sie mehrere CSS-Eigenschafts-/Wertpaare fest

Code kopieren Der Code lautet wie folgt:

$(selector).css({property:value, property:value, ...})

Legt das Name/Wert-Paarobjekt als Stilattribut aller übereinstimmenden Elemente fest.
Dies ist die beste Möglichkeit, eine große Anzahl von Stileigenschaften für alle passenden Elemente festzulegen.

{property:value}
Erforderlich. Gibt das Name/Wert-Paarobjekt an, das als Stilattribut festgelegt werden soll.
Dieser Parameter kann mehrere Name/Wert-Paare einer CSS-Eigenschaft enthalten. Zum Beispiel {"color": "red", "font-weight": "bold"🎜>

Beispiel

Code kopieren Der Code lautet wie folgt:

$("p").css({
„color“: „weiß“,
„Hintergrundfarbe“: „#98bf21“,
„Schriftfamilie“: „Arial“,
„Schriftgröße“: „20px“,
„padding“: „5px“
});

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.