jQuery css() -Methode

jQuery HTML/CSS Methoden

Die css() -Methode von jQuery ermittelt oder setzt eine oder mehrere Stileigenschaften des ausgewählten Elements.

Beim Verwenden der css() -MethodeErhaltenwenn der Wert des Attributes eingestellt wird, wird es zurückgegebenDas erste ausgewählte Elementwird der Wert.

Verwenden Sie die css() -MethodeStellen Sie einwenn der Wert des Attributes eingestellt wird, wird es fürAlle ausgewählten ElementeStellen Sie ein oder mehrere Attribute ein/Wertepaar.

Gleichzeitig kann jQuery CSS- und DOM-Formate von mehrwöchigen Attributen gleich gut interpretieren. Zum Beispiel kann jQuery css(" background-color"） und css(" backgroundColor") und geben den richtigen Wert zurück.

Allerdings wird die Kurzschreibweise von CSS-Attributen (z.B. "background", "margin" und "border") nicht vollständig unterstützt und kann in verschiedenen Browsern unterschiedliche Ergebnisse erzeugen.

Syntax:

Erhalten Sie den Wert eines CSS-Attributes:

$.css(property)

Stellen Sie CSS-Attribute und -werte ein:

$.css(property, value)

Stellen Sie mehrere CSS-Attribute und -werte ein:

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

Stellen Sie CSS-Attribute und -werte mit einer Funktion ein

$.css(selector, function(index, currentValue))

Beispiel

Erhalten Sie die Hintergrundfarbe des geklickten DIVs:

$("div").click(function(){
　　$.css("background-color");
});

Stellen Sie die color-Eigenschaft aller Absätze ein:

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

Stellen Sie mehrere CSS-Attribute und -werte ein:

$("button").click(function(){
　　$("p").css({
　　　　"color": 	"white",
　　　　"font-size": 	"1.3em",
　　　　"background-"color": 	"4285f4",
　　　　"padding": 	"20px"　　
　　});
});

Erhalten Sie die Breite, Höhe, Farbe und Hintergrundfarbe des geklickten DIVs:

$("div").click(function(){
　　let html = ["Der geklickte div hat die folgenden Stile:"];
　　let styleProps = $(this).css(["width", "height", "color", "background-color]);
　　$.each(styleProps, function(prop, value) {
　　　　html.push(prop　+　": 	"　+　value);
　　});
　　$("#result").html(html.join("<br>"));}}
});

CSS-Eigenschaft und -Wert mit einer Funktion setzen:

$("button").click(function(){
　　$("p").css("padding",　function(i,　val){
　　　　return　i　+　25;
　　});
});

Klicken Sie auf die Schaltfläche, um den Einzug aller Absätze zu erhöhen (Verwenden Sie die Funktion):

$("button").click(function(){
　　$("p").css({
　　　　padding:　function(i,　val){
　　　　　　return　parseFloat(val)　*　1.2;
　　　　}
　　});
});

Parameterwert

jQuery HTML/CSS Methoden