Operacje CSS jQuery - metoda css()

Podręcznik operacji CSS jQuery

Przykład

Ustawienie koloru elementu <p>:

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

Spróbuj sam

Definicja i użycie

Metoda css() zwraca lub ustawia jeden lub kilka atrybutów stylu pasujących elementów.

Zwraca wartość atrybutu CSS

Zwraca wartość atrybutu CSS pierwszego pasującego elementu.

Komentarz:Kiedy używane do zwracania wartości, skrócone atrybuty CSS (np. "background" i "border") nie są obsługiwane.

$(selector).css(name)
Parametry Opis
name Wymagane. Określa nazwę atrybutu CSS. Parametr może zawierać dowolny atrybut CSS. Na przykład "color".

Przykład

Uzyskaj wartość atrybutu stylu color pierwszego akapitu:

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

Spróbuj sam

Ustawienie atrybutów CSS

Ustawienie określonego atrybutu CSS we wszystkich dopasowanych elementach.

$(selector).css(name,value)
Parametry Opis
name Wymagane. Określa nazwę atrybutu CSS. Ten parametr może zawierać dowolny atrybut CSS, na przykład "color".
value

Opcjonalnie. Określa wartość atrybutu CSS. Ten parametr może zawierać dowolną wartość atrybutu CSS, na przykład "red".

Jeśli ustawiona jest pusta wartość łańcuchowa, usuwa określony atrybut z elementu.

Przykład

Ustaw kolor wszystkich akapitów na czerwony:

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

Spróbuj sam

Ustawienie atrybutów CSS za pomocą funkcji

Ustawienie wartości atrybutów stylu we wszystkich dopasowanych elementach.

Ta funkcja zwraca wartość atrybutu do ustawienia. Przyjmuje dwa parametry, index jako pozycję elementu w zbiorze obiektów, value jako pierwotną wartość atrybutu.

$(selector).css(name,function(index,value))
Parametry Opis
name Wymagane. Określa nazwę atrybutu CSS. Ten parametr może zawierać dowolny atrybut CSS, na przykład "color".
function(index,value)

Określa funkcję zwracającą nową wartość atrybutu CSS.

  • index - opcjonalnie. Akceptuje pozycję indexa wyborcy.
  • oldvalue - opcjonalnie. Akceptuje bieżącą wartość atrybutu CSS.

Przykład 1

Ustaw kolor wszystkich akapitów na czerwony:

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

Spróbuj sam

Przykład 2

Stopniowo zwiększ szerokość div:

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

Spróbuj sam

Ustawienie wielu atrybutów/wartości CSS

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

Ustaw "obiekt nazwa/wartość" jako atrybuty stylu wszystkich dopasowanych elementów.

To jest najlepszy sposób na ustawienie wielu atrybutów stylu na wszystkich dopasowanych elementach.

Parametry Opis
{property:value}

Wymagane. Określa obiekt "nazwa/wartość" atrybutów stylu do ustawienia.

Ten parametr może zawierać kilka pary nazw atrybutów CSS/wartości. Na przykład {"color":"red","font-weight":"bold"}

Przykład

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

Spróbuj sam

Podręcznik operacji CSS jQuery