jQuery предоставляет несколько методов, таких как addClass(), removeClass() и toggleClass() для манипулирования классами (добавление и удаление) CSS, назначенными элементам HTML.
Метод jQuery addClass()
Метод jQuery addClass() добавляет один или несколько классов к выбранным элементам.
В следующем примере класс .page-header добавляется к элементу <h1>, а класс .highlight к элементам <p> имеющим класс .hint.
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("h1").addClass("page-header"); $("p.hint").addClass("highlight"); }); }); </script>
Вы также можете добавить несколько классов к элементам одновременно. Просто укажите разделенный пробелами список классов в методе addClass(), например так:
$("h1").addClass("page-header highlight");
Метод jQuery removeClass()
Точно так же вы можете удалить классы из элементов, используя метод jQuery removeClass(). Метод removeClass() может удалить один выбранный класс, несколько классов или все классы одновременно.
В следующем примере класс .page-header удаляется из <h1>, а класс .hint и .highlight из элементов <p> при нажатии кнопки.
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("h1").removeClass("page-header"); $("p").removeClass("hint highlight"); }); }); </script>
Когда метод removeClass() вызывается без аргумента, он удаляет все классы из выбранных элементов. Например:
$("h1").removeClass();
Этот метод удалит все классы элемента h1.
Метод jQuery toggleClass()
Метод jQuery toggleClass() добавляет или удаляет один или несколько классов для выбранных элементов таким образом, что, если у выбранного элемента уже есть класс, он удаляется; если элемент не имеет класса, то он добавляется, то есть метод «переключает» классы.
<script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $(this).toggleClass("highlight"); }); }); </script>
Оставить комментарий