/ Курсы jQuery / Добавление и удаление классов

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


Метод addClass()

В jQuery есть несколько методов работы с CSS. В этом уроке мы изучим один из методов.

Метод addClass() добавляет класс к выбранному элементу.


<span>Привет мир!</span>
 
 <style>
   .text {
     color: red;
     font-size: 1.2em;
   }
 </style>
 
  <script>
    $(function() {
    $("span").addClass("text");
    });
  </script>

Привет мир!

Метод removeClass()

Метод removeClass() удаляет класс из выбранного элемента.


<div class="text color"></div>
 
 <style>
   .text {
      color: black;
  }
   .color {
      color: red;
      font-size: 1.2em;
  }
  </style>
 
  <script>
    $(function() {
    $("div").removeClass("red");
    });
  </script>

Привет

Методы toggleClass()

Методы toggleClass() добавляет или удаляет классы. Если у элемента существует определенный класс, то он будет удален, а если класса нету, то он будет добавлен.

Давайте я вам продемонстрирую действие с методом toggleClass().


 <button id="button">Кликни</button>
 <span id="test-text">Привет</span>
 
 <style>
    .none {
  	display: none;
  }
  </style>
 
  <script>
    $(function() {
      $("#button").click(function() {
      	$("#test-text").toggleClass("none");
      });
    });
  </script>

Привет