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ůmremoveClass()
- 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
Reference CSS jQuery
Úplný přehled všech metod jQuery CSS najdete v naší referenční příručce HTML/CSS jQuery .