Pobieranie i ustawianie klas jQuery

Przez jQuery, można łatwo operować na elementach CSS.

Operacje CSS jQuery

jQuery ma kilka metod do operacji CSS. Nauczymy się poniższych:

  • addClass() - dodanie jednej lub wielu klas do wybranych elementów
  • removeClass() - usunięcie jednej lub wielu klas z wybranych elementów
  • toggleClass() - przełączanie dodawania/usuwania klas dla wybranych elementów
  • css() - ustawienie lub zwracanie atrybutów stylu

Styl przykładowy

Poniższy arkusz stylów będzie używany dla wszystkich przykładów na tej stronie:

.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}

Metoda jQuery addClass()

Poniższy przykład pokazuje, jak dodać klasę do różnych elementów. Oczywiście, możesz wybrać wiele elementów do dodania klasy:

Przykład

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

Spróbuj sam

Możesz również określić wiele klas w metodzie addClass():

Przykład

$("button").click(function(){
  $("#div1").addClass("important blue");
});

Spróbuj sam

Metoda jQuery removeClass()

Poniższy przykład pokazuje, jak usunąć określoną klasę z różnych elementów:

Przykład

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

Spróbuj sam

Metoda jQuery toggleClass()

Poniższy przykład pokaże, jak używać metody jQuery toggleClass(). Ta metoda przełącza dodawanie/usuwanie klas dla wybranych elementów:

Przykład

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

Spróbuj sam

Metoda jQuery css()

Omówimy jQuery css() metodę w następnym rozdziale.

Podręcznik jQuery HTML

Aby uzyskać pełne informacje na temat metod jQuery CSS, odwiedź naszą Podręcznik jQuery CSS