HTML DOM Element classList 属性

定义和用法

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

classList 属性返回 DOMTokenList。

实例

例子 1

将 "myStyle" 类添加到元素：

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

Prueba por tu cuenta

例子 2

从元素中删除 "myStyle" 类：

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

Prueba por tu cuenta

例子 3

切换 "myStyle" 的开闭：

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

Prueba por tu cuenta

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

语法

element.classList

返回值

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

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

classList 属性和方法

名称 描述
add() 将一个或多个令牌添加到列表中。
contains() 如果列表包含类，则返回 true。
entries() 从列表中返回带有键/值对的迭代器。
forEach() Ejecuta una función de devolución de llamada para cada token en la lista.
item() Devuelve el token en la posición especificada.
keys() Devuelve un iterador con las claves de la lista.
length Devuelve el número de tokens en la lista.
remove() Elimina uno o más tokens de la lista.
replace() Reemplaza los tokens en la lista.
supports() Devuelve true si el token es uno de los tokens admitidos por la propiedad.
toggle() Cambiar entre tokens en la lista.
value Devuelve una lista de tokens como cadena.
values() Devuelve un iterador con los valores de la lista.

Más ejemplos

Ejemplo 4

Agregar múltiples clases al elemento:

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

Prueba por tu cuenta

Ejemplo 5

Eliminar múltiples clases del elemento:

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

Prueba por tu cuenta

Ejemplo 6

¿Cuántas clases tiene el elemento?

let numb = element.classList.length;

Prueba por tu cuenta

Ejemplo 7

Obtener los nombres de clase del elemento "myDIV":

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

Prueba por tu cuenta

Ejemplo 8

Obtener la primera clase del elemento:

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

Prueba por tu cuenta

Ejemplo 9

¿El elemento tiene la clase "myStyle"?

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

Prueba por tu cuenta

Ejemplo 10

Si el elemento tiene la clase "myStyle", elimina "anotherClass":

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

Prueba por tu cuenta

Ejemplo 11

Cambiar entre clases para crear un botón desplegable:

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

Prueba por tu cuenta

Ejemplo 12

Crear una barra de navegación sticky:

// Obtener el navegador
const navbar = document.getElementById("navbar");
// Obtener la posición de desplazamiento del navegador
const sticky = navbar.offsetTop;
// Añadir la clase sticky al navegador cuando llegues a su posición de desplazamiento
// Eliminarlo cuando se salga de la posición de desplazamiento
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Prueba por tu cuenta

Compatibilidad del navegador

Todos los navegadores lo admiten element.classList:

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

Páginas relacionadas

Tutoriales de CSS:Sintaxis de CSS

Manual de referencia de CSS:Selector .class de CSS

Objeto DOMTokenList

Atributo className

Método getElementsByClassName()

Objeto Style de HTML DOM