HTML DOM classListPropiedad

元素对象参考手册Objeto de elemento

Ejemplo

Agregar una clase al elemento <div>:

document.getElementById("myDIV").classList.add("mystyle");

Pruébalo »

Definición y uso

La propiedad classList devuelve los nombres de clase del elemento como un objeto DOMTokenList.

Esta propiedad se utiliza para agregar, eliminar y alternar clases CSS en un elemento.

La propiedad classList es de solo lectura, pero puedes modificarla usando los métodos add() y remove().

Soporte del navegador

Los números en la tabla indican la versión del primer navegador que soporta la propiedad.

Propiedad
classList 8.0 10.0 3.6 5.1 11.5

Sintaxis

element.classList

Properties

Propiedad Description
length Devuelve el número de clases en la lista de clases.

Esta propiedad es de solo lectura.

Métodos

Método Descripción
add(class1, class2, ...) Agrega uno o más nombres de clase a un elemento.

Si el nombre de clase especificado ya existe, no se agrega.
contains(class) Devuelve un valor booleano que indica si el nombre de clase especificado existe.

Valores posibles:

  • true - El elemento ya contiene el nombre de clase.
  • false - El elemento no contiene el nombre de clase.
item(index) Devuelve el nombre de clase correspondiente al valor de índice en el elemento. El valor del índice comienza en 0.

Si el valor del índice está fuera del rango, devuelvenull
remove(class1, class2, ...) Elimina uno o más nombres de clase de un elemento.

Nota:Eliminar un nombre de clase que no existe no produce error.
toggle(class, true|false) Alterna un nombre de clase en un elemento.

El primer parámetro es el nombre de clase que se eliminará del elemento y devuelve false.
Si el nombre de clase no existe, se agrega al elemento y devuelve true.

El segundo es un parámetro opcional, un valor booleano que se utiliza para establecer si se fuerza la adición o eliminación de la clase en el elemento, independientemente de si el nombre de clase existe. Por ejemplo:

Eliminar una clase:element.classList.toggle("classToRemove", false);
Agregar una clase:element.classList.toggle("classToAdd", true);

Nota:Internet Explorer u Opera 12 y versiones anteriores no soportan el segundo parámetro.

Descripción técnica

Valor de retorno: Un DOMTokenList que contiene la lista de nombres de clase del elemento.
实例

Más ejemplos

Ejemplo

Agregar varias clases al elemento <div>:

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

Pruébalo »

Ejemplo

Eliminar una clase del elemento <div>:

document.getElementById("myDIV").classList.remove("mystyle");

Pruébalo »

Ejemplo

Eliminar varias clases del elemento <div>:

document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

Pruébalo »

Ejemplo

Alternar la clase del elemento <div>:

document.getElementById("myDIV").classList.toggle("newClassName");

Pruébalo »

Ejemplo

Obtener el nombre de clase del elemento <div>:

<div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element</div>

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

xEl resultado es:

mystyle anotherClass thirdClass

Pruébalo »

Ejemplo

Ver cuántos nombres de clase tiene el elemento <div>:

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

xEl resultado es:

3

Pruébalo »

Ejemplo

Obtener el primer nombre de clase (índice 0) del elemento <div>:

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

xEl resultado es:

mystyle

Pruébalo »

Ejemplo

Verificar si el elemento tiene la clase "mystyle":

var x = document.getElementById("myDIV").classList.contains("mystyle");

xEl resultado es:

true

Pruébalo »

Ejemplo

Verificar si el elemento tiene la clase "mystyle"; si existe, eliminar otro nombre de clase:

var x = document.getElementById("myDIV");

if (x.classList.contains("mystyle")) {
    x.classList.remove("anotherClass");
} else {
    alert("Could not find it.");
}

Pruébalo »

Artículos relacionados

Tutorial de CSS:Selectores CSS

Manual de referencia CSS:CSS .classSelectores

Manual de referencia HTML DOM:Propiedad className del HTML DOM

Manual de referencia HTML DOM:Método getElementsByClassName() del HTML DOM

Manual de referencia HTML DOM:Objeto Style del HTML DOM

元素对象参考手册Objeto de elemento

Otras extensiones