jQuery – Získejte a nastavte třídy CSS


S jQuery je snadné manipulovat se stylem prvků.


jQuery Manipulační CSS

jQuery má několik metod pro manipulaci s CSS. Podíváme se na následující metody:

  • addClass()- Přidá jednu nebo více tříd k vybraným prvkům
  • removeClass()- Odebere jednu nebo více tříd z vybraných prvků
  • toggleClass()- Přepíná mezi přidáváním/odebíráním tříd z vybraných prvků
  • css()- Nastaví nebo vrátí atribut stylu

Příklad šablony stylů

Následující šablona stylů bude použita pro všechny příklady na této stránce:

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

.blue {
  color: blue;
}

Metoda jQuery addClass().

Následující příklad ukazuje, jak přidat atributy třídy k různým prvkům. Při přidávání tříd můžete samozřejmě vybrat více prvků:

Příklad

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

V rámci metody můžete také zadat více tříd addClass():

Příklad

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


Metoda jQuery removeClass().

Následující příklad ukazuje, jak odstranit konkrétní atribut třídy z různých prvků:

Příklad

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

Metoda jQuery toggleClass().

Následující příklad ukáže, jak používat toggleClass()metodu jQuery. Tato metoda přepíná mezi přidáváním/odebíráním tříd z vybraných prvků:

Příklad

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

Metoda jQuery css().

Metoda jQuery css()bude vysvětlena v další kapitole.


Cvičení jQuery

Otestujte se pomocí cvičení

Cvičení:

Použijte metodu jQuery k přidání "důležité" třídy do prvku <p>.

$("p").("");


Reference CSS jQuery

Úplný přehled všech metod jQuery CSS najdete v naší referenční příručce HTML/CSS jQuery .