Как изменить классы CSS в JavaScript

Введение

В этом руководстве вы узнаете, как изменять классы CSS с помощью объекта JavaScript classList для вашего проекта манипулирования DOM. Объект classList позволяет настраивать классы CSS, назначенные элементу HTML.

Предпосылки

• Общие знания JavaScript. Чтобы узнать больше о JavaScript, ознакомьтесь с серией статей How To Code in JavaScript.
• Общие знания CSS. Чтобы познакомиться с CSS, ознакомьтесь с учебным пособием «Как применить стили CSS к HTML с помощью каскада и специфичности».

Запуск вашего проекта

Создайте файл index.html и включите тег style с классами CSS и элемент абзаца с id:

[label index.html] 
<style>
  .colorText {
    color: purple;
  }

  .boldText {
    font-weight: bold;
  }

  .bigText {
    font-size: 35px;
  }
</style>

<p id="myText">
  Hello World! 
</p>

Давайте теперь изменим ваш текст с помощью свойства classList и применим ваши классы CSS.

Использование методов classList .add() и .contains()

Создайте файл index.js, возьмите ссылку на элемент абзаца и вызовите метод classList.add():

[label index.js] 
const myText = document.getElementById('myText');

myText.classList.add('colorText');

Встроенный метод classList.add() применяет класс к вашему элементу HTML. В этом случае ваш текст в элементе абзаца теперь будет фиолетовым.

Вы также можете проверить, существует ли класс CSS в вашем элементе абзаца, используя метод classList.contains() для возврата логического значения:

[label index.js] 
const myText = document.getElementById('myText');

console.log(myText.classList.contains('colorText')); // true

Поскольку класс CSS colorText существует в вашем элементе абзаца, ваш вызов возвращает true.

Применение методов classList .item() и .remove()

В файле index.js добавьте дополнительные классы CSS к элементу абзаца:

const myText = document.getElementById('myText');

myText.classList.add('boldText');
myText.classList.add('bigText');
console.log(myText.classList); // ['colorText', 'boldText', 'bigText'];

Свойство classList хранит каждый дополнительный класс в массиве. Если вы выведете myText.classList, будет выведен массив с вашими классами CSS.

Чтобы проверить указанный индекс каждого класса CSS в массиве, вызовите метод classList.item():

const myText = document.getElementById('myText');

myText.classList.item('boldText'); // 2

Чтобы удалить класс CSS, используйте метод classList.remove():

[label index.js] 
const myText = document.getElementById('myText');

myText.classList.remove('bigText');
console.log(myText.classList); // ['colorText', 'boldText'];

После того как вы выведете myText.classList, удаленный вами класс CSS не появится в массиве и не будет применяться к вашему элементу абзаца.

Теперь, когда вы можете добавлять, проверять и удалять классы CSS, давайте рассмотрим, как усилить другие методы classList.

Обработка метода classList .toggle()

Вместо одновременного вызова classList.add() и classList.remove() вы можете использовать метод classList.toggle():

Для этого реализуйте прослушиватель событий на кнопке в файле index.js:

[label index.js] 
textButton.addEventListener('click', () => {
  myText.classList.toggle('newFont');
});

С каждым щелчком classList.toggle() будет добавлять класс CSS, если он не существует в массиве classList, и возвращать true. Если класс CSS существует, метод удалит класс и вернет false.

[label index.js] 
const anotherClass = myText.classList.toggle('newSize');

console.log(anotherClass); // true --> class was added

Вы также можете добавить логическое значение в качестве необязательного второго аргумента в методе classList.toggle(). Это либо добавит, либо удалит класс CSS, в зависимости от того, как оценивается второй аргумент:

const bool = false; 

let firstToggle = myText.classList.toggle('newSize', bool);
console.log(firstToggle);
// false, 'newFont' already exists and will remove from classList array

let secondToggle = shadesEl.classList.toggle('newColor', !bool);
console.log(secondToggle);
// true, 'newColor' does not exist and will add the class

Метод classList.toggle() поддерживает добавление и удаление классов CSS независимо от того, существуют они или нет в вашем массиве, с помощью более коротких строк кода.

Заключение

Свойство classList обеспечивает большую производительность и функциональность для изменения ваших элементов HTML и их классов CSS в JavaScript.

Для дополнительного чтения ознакомьтесь со статьей Understanding the DOM — Document Object Model.