HTML DOM Element classList 属性

定义和用法

classList 属性返回元素的 CSS 类名。

classList 属性返回 DOMTokenList。

实例

例子 1

将 "myStyle" 类添加到元素：

const list = element.classList;
list.add("myStyle");

Prova tu stesso

例子 2

从元素中删除 "myStyle" 类：

const list = element.classList;
list.remove("myStyle");

Prova tu stesso

例子 3

切换 "myStyle" 的开闭：

const list = element.classList;
list.toggle("myStyle");

Prova tu stesso

提示：页面下方提供更多实例。

语法

element.classList

返回值

类型 描述
对象 DOMTokenList。元素的类名列表。

注释：classList 属性是只读的，但您可以使用下面列出的方法从列表中添加、切换或删除 CSS 类：

classList 属性和方法

名称 描述
add() 将一个或多个令牌添加到列表中。
contains() 如果列表包含类，则返回 true。
entries() 从列表中返回带有键/值对的迭代器。
forEach() Esegue una funzione di callback per ogni token nella lista.
item() Restituisce il token all'indice specificato.
keys() Restituisce un iteratore con le chiavi nella lista.
length Restituisce il numero di token nella lista.
remove() Rimuove uno o più token dalla lista.
replace() Sostituisce i token nella lista.
supports() Restituisce true se il token è uno dei token supportati dall'attributo.
toggle() Cambia tra i token nella lista.
value Restituisce la lista di token come stringa.
values() Restituisce un iteratore con i valori della lista.

Più esempi

Esempio 4

Aggiungi più classi all'elemento:

element.classList.add("myStyle", "anotherClass", "thirdClass");

Prova tu stesso

Esempio 5

Rimuovi più classi dall'elemento:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

Prova tu stesso

Esempio 6

Quante classi ha l'elemento?

let numb = element.classList.length;

Prova tu stesso

Esempio 7

Ottieni i nomi delle classi dell'elemento "myDIV":

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>Io sono myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

Prova tu stesso

Esempio 8

Ottieni la prima classe dell'elemento:

let className = element.classList.item(0);

Prova tu stesso

Esempio 9

L'elemento ha la classe "myStyle"?

let x = element.classList.contains("myStyle");

Prova tu stesso

Esempio 10

Se l'elemento ha la classe "myStyle", rimuovi "anotherClass":

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

Prova tu stesso

Esempio 11

Cambia tra le classi per creare un pulsante a discesa:

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

Prova tu stesso

Esempio 12

Creazione della barra di navigazione adesiva:

// Ottieni la barra di navigazione
const navbar = document.getElementById("navbar");
// Ottieni la posizione di scorrimento della barra di navigazione
const sticky = navbar.offsetTop;
// Aggiungi la classe sticky alla barra di navigazione quando si raggiunge la sua posizione di scorrimento
// Rimuovi la classe quando si lascia la posizione di scorrimento
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Prova tu stesso

Supporto del browser

Tutti i browser supportano element.classList:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supporto 9-11 Supporto Supporto Supporto Supporto

Pagine correlate

Tutorial CSS:Sintassi CSS

Manuale di riferimento CSS:Selettore .class CSS

Oggetto DOMTokenList

Proprietà className

Metodo getElementsByClassName()

Oggetto Style HTML DOM