Классы и стили

Внешний вид элементов лучше описывать в CSS-классах, а из JavaScript только добавлять и убирать эти классы. Для этого в jQuery есть четыре метода. Для редких случаев, когда нужно задать конкретное значение стиля, есть метод css().

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

<style>
  .done { text-decoration: line-through; color: gray; }
</style>
 
<ul>
  <li>Купить хлеб</li>
  <li>Позвонить Олегу</li>
</ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('li').first().addClass('done');
</script>

Первый пункт зачёркнут: ему добавлен класс done, а стиль описан в <style>. В проекте стили лежат в отдельном файле, например style.css.

Остальные методы работают так же:

Несколько классов перечисляют через пробел: addClass('done important').

Переключение по условию

У toggleClass() есть второй аргумент: true — добавить класс, false — убрать. Это удобно, когда состояние уже известно:

<style>
  .done { text-decoration: line-through; color: gray; }
</style>
 
<ul>
  <li>Купить хлеб</li>
  <li>Позвонить Олегу</li>
</ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  const isDone = true;
 
  $('li').eq(1).toggleClass('done', isDone);
 
  console.log($('li').eq(1).hasClass('done')); // true
  console.log($('.done').length);              // 1
</script>

Второй пункт зачёркнут, а вывод показывает, что класс на месте.

Метод css

css() читает и задаёт стили прямо в атрибуте style элемента:

<p id="counter">Задач: 3</p>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#counter').css('font-size', 20);
  $('#counter').css({ color: 'white', backgroundColor: 'teal', padding: '4px 8px' });
 
  console.log($('#counter').css('font-size')); // 20px
</script>

К числам jQuery сам добавляет px. Имена свойств пишут как в CSS (font-size) или в стиле JavaScript (backgroundColor). При чтении css() возвращает вычисленное значение — то, которое браузер реально применил.

То же на обычном JavaScript

addClass, removeClass, toggleClass, hasClass соответствуют методам classList.add, classList.remove, classList.toggle, classList.contains. Метод css() — свойству element.style и функции getComputedStyle().

Частая ошибка

Ставить точку в имени класса: addClass('.done'). Точка нужна только в селекторе. Метод добавит класс с именем .done, и стиль не применится. Правильно: $('.done') для поиска и addClass('done') для добавления.