jQuery - Pobierz i ustaw klasy CSS
Dzięki jQuery łatwo jest manipulować stylem elementów.
jQuery Manipulowanie CSS
jQuery ma kilka metod manipulacji CSS. Przyjrzymy się następującym metodom:
addClass()- Dodaje jedną lub więcej klas do wybranych elementówremoveClass()- Usuwa jedną lub więcej klas z wybranych elementówtoggleClass()- Przełącza pomiędzy dodawaniem/usuwaniem klas z wybranych elementówcss()- Ustawia lub zwraca atrybut stylu
Przykładowy arkusz stylów
We wszystkich przykładach na tej stronie zostanie użyty następujący arkusz stylów:
.important
{
font-weight: bold;
font-size: xx-large;
}
.blue
{
color: blue;
}
Metoda jQuery addClass()
Poniższy przykład pokazuje, jak dodać atrybuty klasy do różnych elementów. Oczywiście przy dodawaniu klas możesz wybrać wiele elementów:
Przykład
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
Możesz także określić wiele klas w ramach addClass()metody:
Przykład
$("button").click(function(){
$("#div1").addClass("important blue");
});
Metoda jQuery removeClass()
Poniższy przykład pokazuje, jak usunąć określony atrybut klasy z różnych elementów:
Przykład
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
Metoda jQuery toggleClass()
Poniższy przykład pokaże, jak korzystać z toggleClass()metody jQuery. Ta metoda przełącza pomiędzy dodawaniem/usuwaniem klas z wybranych elementów:
Przykład
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
Metoda jQuery css()
Metoda jQuery css()zostanie wyjaśniona w następnym rozdziale.
Ćwiczenia z jQuery
Dokumentacja CSS jQuery
Aby uzyskać pełny przegląd wszystkich metod jQuery CSS, przejdź do naszego jQuery HTML/CSS Reference .