Далее на странице...
- Объект ClassList - Свойство length Количество классов элемента
- Метод item свойства ClassList Получить класс по индексу
- Метод add - Добавить класс Добавление нескольких классов
- Метод remove - Удалить класс
- Метод toggle - Чередовать класс элемента Добавить класс если его нет и удалить если он есть
- Метод contains - Наличие класса у элемента Проверка наличия класса Используется при составлении условий
- Свойство ClassList - Практический пример На практике метод toggle не всегда применим Иногда лучше составить условие if-else
- Свойство className - Устарело Часто не удобно и не рекомендовано
Element.classList — это специальный объект, который хранит информацию о текущих классах элемента и содержит методы для работы с ними.
Свойство/объект classList даёт возможность просматривать и манипулировать классами элемента.
Здесь будут рассмотрены методы объекта ClassList: item, add, remove, toggle и contains. И одно из свойств объекта ClassList - свойство length.
Объект ClassList - Свойство length
Используя свойство length объекта ClassList, узнаем количество классов элемента.
Исходный HTML-код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JavaScript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="first" class="btn-block">
<button class="blue some"></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
<script src="script.js"></script>
</body>
</html>
JavaScript-код
'use strict';
const btns = document.querySelectorAll('button');
console.log(btns[0].classList.length);
Результат в консоли
2
Результат в Браузере
btns - переменная содержит псевдомассив - коллекцию элементов (в данном случае кнопок - тегов button). См. теорию - метод querySelectorAll.
Element.classList.length - такая запись позволяет узнать количество классов элемента.
В нашем случае btns[0].classList.length - это количество классов 1-ой кнопки.
Метод item свойства ClassList
Метод item свойства ClassList позволяет получить класс по индексу.
JavaScript-код
'use strict';
const btns = document.querySelectorAll('button');
console.log(btns[0].classList.item(0));
Результат в консоли
blue
Результат в Браузере
Первый класс у 1-ой кнопки - это blue.
Метод add - Добавить класс
Метод add свойства ClassList позволяет добавить класс.
Добавим к 1-ой кнопке класс red - изменим синий цвет кнопки на красный.
JavaScript-код
'use strict';
const btns = document.querySelectorAll('button');
btns[0].classList.add('red');
DevTools - Вкладка Elements
<button class="blue some red"></button>
Результат в Браузере
В результате в DevTools (в средствах веб-разработки) можно увидеть - добавился класс red.
Метод add позволяет добавлять несколько классов. При этом они перечисляются через запятую.
Метод remove - Удалить класс
Метод remove свойства ClassList позволяет удалить класс.
Удалим класс blue.
JavaScript-код
'use strict';
const btns = document.querySelectorAll('button');
btns[0].classList.add('red');
btns[0].classList.remove('blue'); // Удаляем класс blue
DevTools - Вкладка Elements
<button class="some red"></button>
Результат в Браузере
В результате мы удалили класс blue.
Метод toggle - Чередовать класс элемента
Метод toggle свойства ClassList позволяет чередовать класс элемента: добавить класс, если его нет и удалить, если он есть.
Вернем класс blue.
JavaScript-код
'use strict';
const btns = document.querySelectorAll('button');
btns[0].classList.add('red');
btns[0].classList.remove('blue'); // Удаляем класс blue
btns[0].classList.toggle('blue'); // Добавляем класс blue
DevTools - Вкладка Elements
<button class="some red blue"></button>
Результат в Браузере
В результате мы снова добавили класс blue. Теперь он на последнем месте.
Метод contains - Наличие класса у элемента
Метод contains свойства ClassList проверяет наличие класса у элемента.
Метод contains часто используется при составлении условий.
JavaScript-код
'use strict';
const btns = document.querySelectorAll('button');
// Добавляем класс 'red' для 2-ой кнопки
btns[1].classList.add('red');
// Проверяем существование класса 'red'
if(btns[1].classList.contains('red')){
console.log('red');
}
Результат в консоли
red
Результат в Браузере
В результате для 2-ой кнопки добавлен класс red. И при помощи условия сделана проверка его наличия.
Если класса нет - метод contains возвращает false.
Свойство ClassList - Практический пример
Здесь мы реализуем следующее: при клике по первой кнопке проверим - есть ли класс red у второй кнопки.
Если класса нет, то добавим его. Если он есть - то удалим.
Вариант №1 - Условие if-else
JavaScript-код
'use strict';
const btns = document.querySelectorAll('button');
// 1. Событие "Клик по 1-ой кнопке"
// 2. Если класса 'red' нет, то добавляем его
// 3. Иначе удаляем класс 'red'
btns[0].addEventListener('click', () => {
if (!btns[1].classList.contains('red')) {
btns[1].classList.add('red');
}
else {
btns[1].classList.remove('red');
}
});
Результат в Браузере
Итак, здесь мы сначала проверяем - есть ли класс у элемента (classList.). А потом либо добавляем его (classList.add), либо удаляем (classList.remove).
Вариант №2 - Метод toggle
В данном случае есть возможность оптимизировать код, воспользовавшись методом toggle.
JavaScript-код
'use strict';
const btns = document.querySelectorAll('button');
btns[0].addEventListener('click', () => {
btns[1].classList.toggle('red');
});
Результат в Браузере
Здесь метод toggle делает то же самое, что код с условием if-else в примере выше.
На практике метод toggle не всегда применим. Иногда лучше составлять условие if-else (как в Варианте №1 ).
Свойство className - Устарело
Свойство className устарело (работать с ним не удобно) и оно не рекомендовано для использования.
JavaScript-код
'use strict';
const btns = document.querySelectorAll('button');
console.log(btns[0].className);
Результат в консоли
blue some
Результат в Браузере
Как видно из примера, свойство className возвращает все классы элемента в виде одной строки. Дальше как-то работать с классами можно, но делать это не удобно.
Здесь были рассмотрены методы объекта ClassList: item, add, remove, toggle и contains, которые позволяют манипулировать классами элемента - получить класс, добавить и удалить, чередовать классы и проверять их наличие.
Тема следующей статьи - Делегирование событий - как отслеживать события на множестве элементов.
