Добавление и удаление классов CSS в jQuery

Добавление и удаление классов CSS в jQuery

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() может удалить один выбранный класс, несколько классов или все классы одновременно.

блок 1

В следующем примере класс .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>
блок 3

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*