jQuery CSS 操作 - css() 方法

jQuery CSS-Handbuch zur Operation

Beispiel

设置 <p> 元素的颜色：

$(".btn1").click(function(){
  $("p").css("color","red");
);

Versuchen Sie es selbst

定义和用法

css() 方法返回或设置匹配的元素的一个或多个样式属性。

返回 CSS 属性值

返回第一个匹配元素的 CSS 属性值。

注释：当用于返回一个值时，不支持简写的 CSS 属性（比如 "background" 和 "border"）。

$(selector).css(name)
Parameter Beschreibung
name 必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性。比如 "color"。

Beispiel

获取第一个段落的 color 样式属性的值：

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

Versuchen Sie es selbst

设置 CSS 属性

Setzt das angegebene CSS-Attribut aller passenden Elemente.

$(selector).css(name,value)
Parameter Beschreibung
name Notwendig. Bestimmt den Namen des CSS-Attributs. Dieser Parameter kann jede CSS-Attributbezeichnung enthalten, z.B. "color".
value

Optional. Bestimmt den Wert des CSS-Attributs. Dieser Parameter kann jeden CSS-Attributwert enthalten, z.B. "red".

Wenn ein leerer String-Wert gesetzt wird, wird das angegebene Attribut aus dem Element entfernt.

Beispiel

Setzen Sie die Farbe aller Absätze auf rot:

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

Versuchen Sie es selbst

Verwenden Sie eine Funktion, um CSS-Attribute zu setzen

Setzt den Wert des Stilattributs aller passenden Elemente.

Diese Funktion gibt den zu setzenden Attributwert zurück. Akzeptiert zwei Parameter, index ist die Position des Elements im Objektensemble, value ist der ursprüngliche Attributwert.

$(selector).css(name,function(index,value))
Parameter Beschreibung
name Notwendig. Bestimmt den Namen des CSS-Attributs. Dieser Parameter kann jede CSS-Attributbezeichnung enthalten, z.B. "color".
function(index,value)

Bestimmt die Funktion, die den neuen Wert des CSS-Attributs zurückgibt.

  • index - Optional. Akzeptiert die Indexposition des Selectors
  • oldvalue - Optional. Akzeptiert den aktuellen Wert des CSS-Attributs.

Beispiel 1

Setzen Sie die Farbe aller Absätze auf rot:

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

Versuchen Sie es selbst

Beispiel 2

Vergrößern Sie die Breite des div schrittweise:

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

Versuchen Sie es selbst

Setzen Sie mehrere CSS-Attribut/Wert-Paare

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

Setzen Sie das "Name/Value"-Objekt als Stilattribut aller passenden Elemente.

Dies ist die beste Methode, um eine Vielzahl von Stilattributen auf allen passenden Elementen zu setzen.

Parameter Beschreibung
{property:value}

Notwendig. Bestimmt das "Name/Value"-Objekt, das als Stilattribut gesetzt werden soll.

Dieser Parameter kann mehrere Paare von CSS-Attributnamen/Werten enthalten. Zum Beispiel {"color":"red","font-weight":"bold"}

Beispiel

$("p").css({
  "color":"white",
  "background-color":"#98bf21",
  "font-family":"Arial",
  "font-size":"20px",
  "padding":"5px"
  );

Versuchen Sie es selbst

jQuery CSS-Handbuch zur Operation