пример
Добавьте "mystyle" класс в <div> элемент:
document.getElementById("myDIV").classList.add("mystyle"); Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
ClassList свойство возвращает класс name(s) элемента, как DOMTokenList объекта.
Это свойство полезно для добавления, удаления и переключения классов CSS на элементе.
ClassList свойство только для чтения, однако, вы можете изменить его с помощью add() и remove() методы.
Решение кросс-браузер: ClassList свойство не поддерживается в IE9 и раньше. Тем не менее, вы можете использовать Classname свойство или регулярные выражения для решения кросс-браузера (см "More Examples" на нижней части этой страницы).
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
| Имущество | |||||
|---|---|---|---|---|---|
| classList | 8,0 | 10,0 | 3,6 | 5,1 | 11,5 |
Синтаксис
element .classListсвойства
| Имущество | Описание |
|---|---|
| length | Возвращает количество классов в списке. Это свойство только для чтения |
методы
| метод | Описание |
|---|---|
| add( class1, class2, ... ) | Добавляет один или несколько имен классов элемента. Если указанный класс уже существует, не будет добавлен класс |
| contains( class ) | Возвращает логическое значение, указывающее, имеет ли элемент имя указанного класса. Возможные значения:
|
| item( index ) | Возвращает имя класса с указанным номером из элемента. Индекс начинается с 0. Возвращает пустое значение , если индекс находится вне диапазона |
| remove( class1, class2, ... ) | Удаляет один или несколько имен классов из элемента. Примечание: Удаление класса , который не существует, не бросает ошибку |
| toggle( class, true|false) | Переключение между именем класса для элемента. Первый параметр удаляет указанный класс из элемента, и возвращает ложь. Если класс не существует, он добавляется к элементу, а возвращаемое значение верно. Необязательный второй параметр представляет собой логическое значение, которое заставляет класс должен быть добавлен или удален, независимо от того, является ли оно уже существует. Например: Удалить класс: элемент .classList. toggle("classToRemove", false) ; Добавьте класс: элемент .classList. toggle("classToAdd", true) ; Примечание: второй параметр не поддерживается в Internet Explorer или Opera 12 и выше. |
Технические подробности
| Возвращаемое значение: | DOMTokenList, содержащий список классов name(s) элемент |
|---|
Еще примеры
пример
Добавление нескольких классов в <div> элемент:
document.getElementById("myDIV").classList.add("mystyle",
"anotherClass", "thirdClass"); Попробуй сам " пример
Удалить класс из <div> элемент:
document.getElementById("myDIV").classList.remove("mystyle"); Попробуй сам " пример
Удалить несколько классов из <div> элемент:
document.getElementById("myDIV").classList.remove("mystyle",
"anotherClass", "thirdClass"); Попробуй сам " пример
Переключение между двумя классами для <div> элемент:
document.getElementById("myDIV").classList.toggle("newClassName"); Попробуй сам " пример
Получить класс name(s) в виде <div> элемент:
<div id="myDIV" class="mystyle
anotherClass thirdClass">I am a DIV element</div>
var x = document.getElementById("myDIV").classList;В результате х будет:
mystyle
anotherClass thirdClass Попробуй сам " пример
Узнайте, сколько имен класса A <div> элемент имеет:
var x = document.getElementById("myDIV").classList.length;В результате х будет:
3 Попробуй сам " пример
Получить имя класса (index 0) в виде <div> элемент:
var x = document.getElementById("myDIV").classList.item(0);В результате х будет:
mystyle Попробуй сам " пример
Выясните , если элемент имеет "mystyle" класс:
var x = document.getElementById("myDIV").classList.contains("mystyle");В результате х будет:
true Попробуй сам " пример
Выясните , если элемент имеет "mystyle" класс. Если это так, удалите другое имя класса:
var x = document.getElementById("myDIV");
if
(x.classList.contains("mystyle")) {
x.classList.remove("anotherClass");
} else {
alert("Could not find it.");
} Попробуй сам " пример
Переключение между классами для создания кнопки раскрывающегося списка:
// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction toggles between adding and removing the show class, which
is used to hide and show the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick =
function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show'))
{
openDropdown.classList.remove('show');
}
}
}
}
Попробуй сам " Запасной Пример: добавить
Решение кросс-браузер, при использовании ClassList. add() метод, для IE9 и раньше:
var x = document.getElementById("myDIV");
if (x.classList) {
x.classList.add("mystyle");
} else {
x.className
= "mystyle"; // For IE9 and earlier
} Попробуй сам " Запасной Пример: удалить
Решение кросс-браузер, при использовании ClassList. remove() метод, для IE9 и раньше:
var x = document.getElementById("myDIV");
if (x.classList) {
x.classList.remove("mystyle");
} else {
x.className = x.className.replace(/\bmystyle/g, ""); // For IE9
and earlier
} Попробуй сам " Запасной Пример: содержит
Решение кросс-браузер, при использовании ClassList. contains() метод, для IE9 и раньше:
var x = document.getElementById("myDIV");
if (x.classList)
{
alert(x.classList.contains("mystyle"));
} else {
alert(/\bmystyle/g.test(x.className)); // For IE9 and earlier
} Попробуй сам " Запасной Пример: переключение
Решение кросс-браузер, при использовании ClassList. toggle() метод, для IE9:
var x = document.getElementById("myDIV");
if (x.classList) {
x.classList.toggle("mystyle");
} else {
// For IE9
var classes = x.className.split(" ");
var i =
classes.indexOf("mystyle");
if (i >= 0)
classes.splice(i, 1);
else
classes.push("mystyle");
x.className = classes.join(" ");
} Попробуй сам " Похожие страницы
Учебник CSS: CSS селекторы
CSS Reference: CSS .class Selector
HTML DOM Ссылка: HTML DOM className Property
HTML DOM Ссылка: HTML DOM getElementsByClassName() Метод
HTML DOM Ссылка: HTML DOM Style Object
<Элемент объекта