Objeto de JavaScript

Manual de referencia de JavaScript

Manual de referencia de DOM JS

Objeto History de JavaScript Objeto Elemento de HTML DOM

Propiedad classList del DOM HTML

classListLa propiedad de solo lectura devuelve la colección en tiempo real de DOMTokenList de la propiedad class del elemento.

La propiedad classList es muy útil para agregar, eliminar y alternar clases CSS en un elemento.

Esta propiedad es de solo lectura, aunque puede modificarse utilizando los métodos add() y remove().

El uso de classList es un método conveniente que permiteclassNameAcceder a la lista de clases del elemento mediante una cadena de caracteres separada por espacios.

Sintaxis:

element.classList

Ejemplo

var elem = document.getElementById("x");
elem.classList.add("para");

Prueba para ver‹/›

Compatibilidad del navegador

El número en la tabla especifica la primera versión del navegador que admite completamente la propiedad classList:

Atributo
classList	8	3.6	Es	5.1	10

Propiedad

Atributo	Descripción
length	Devuelve el número de clases en la lista.

Método

Método	Descripción
add(class1, class2, ...)	Agregar una o más nombres de clase a un elemento. Si la propiedad class del elemento ya contiene la clase especificada, no se agregará la clase.
contains(class)}}	Verificar si el valor de la clase especificada existe en la propiedad class del elemento. Valores posibles: true-El elemento contiene el nombre de clase especificado false-El elemento no contiene el nombre de clase especificado.
item(index)}}	Devuelve el valor de la clase a través del índice de la colección. El índice comienza en 0. Si el índice está fuera de rango, se devuelvenull.
remove(class1, class2, ...)	Eliminar una o más nombres de clase de un elemento. Atención:Eliminar una clase inexistente no causará errores.
replace(oldClass, newClass)}}	Reemplazar las clases existentes con nuevas clases.
toggle(class, true\|false)	Alternar entre los nombres de clase del elemento. Cuando solo existe un parámetro: alternar el valor de la clase; de lo contrario, devolver 0. Es decir, si la clase existe, se elimina y se devuelve false, si no existe, se agrega y se devuelve true. Cuando existe un segundo parámetro opcional: si el valor del segundo parámetro es true, se agrega el valor de la clase especificada; si el valor del segundo parámetro es false, se elimina. Ejemplo: 　　　　　 Eliminar una clase:elemento .classList.toggle（"classToRemove", false）; 　 Agregar una clase:elemento .classList.toggle（"classToAdd", true）;

Detalles técnicos

Valor devuelto:	DOMTokenList, que contiene la lista de nombres de clases del elemento
Versión DOM:	Nivel DOM1

Más ejemplos

Agregar múltiples clases a un elemento :

Ejemplo

var elem = document.getElementById("x");
elem.classList.add("para", "shadow");

Prueba para ver‹/›

Eliminar una clase de un elemento :

Ejemplo

var elem = document.getElementById("x");
elem.classList.remove("para");

Prueba para ver‹/›

Eliminar múltiples clases de un elemento :

Ejemplo

var elem = document.getElementById("x");
elem.classList.remove("para", "shadow");

Prueba para ver‹/›

Alternar entre las clases de un elemento en dos clases:

Ejemplo

var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");

Prueba para ver‹/›

Devolver las clases del elemento que tiene:

Ejemplo

var len = document.getElementById("x").classList.length;

Prueba para ver‹/›

Devolver el nombre de las clases del elemento :

Ejemplo

var name = document.getElementById("x").classList;

Prueba para ver‹/›

Devolver el nombre de la primera clase del elemento (índice 0):

Ejemplo

var name = document.getElementById("x").classList[0];

Prueba para ver‹/›

Usar el método item() para obtener el nombre de la primera clase del elemento (índice 0):

Ejemplo

var name = document.getElementById("x").classList.item(0);

Prueba para ver‹/›

Encontrar si el elemento tiene la clase "shadow":

Ejemplo

var list = document.getElementById("x").classList;
if (list.contains("shadow")) {}}
alert("¡Sí!!! El elemento P contiene #39;shadow#39; clase);
} else {
alert("No #39;shadow#39; clase encontrada");　　　
}

Prueba para ver‹/›

Cambiar una clase ("open") para crear un botón de navegación lateral:

Referencias relacionadas

Tutoriales de CSS:Selector de CSS

Referencia de CSS:CSS#idSelector

Referencia de CSS: CSS .class Selector

Referencia de HTML DOM:Atributo className de HTML DOM

Referencia de HTML DOM:Método getElementsByClassName() de HTML DOM

Referencia de HTML DOM:Método getElementById() de HTML DOM

Referencia de HTML DOM:Método querySelector() de HTML DOM

Objeto Elemento de HTML DOM

Objeto History de JavaScript Objeto Elemento de HTML DOM