HTML DOM classList Propery

<Elemento de objeto

Ejemplo

Añadir el "mystyle" clase a un <div> elemento:

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

Inténtalo tú mismo "

Más "Try it Yourself" ejemplos a continuación.

Definición y Uso

La propiedad classList devuelve la clase name(s) de un elemento, como un objeto DOMTokenList.

Esta propiedad es útil para añadir, eliminar y cambiar las clases CSS de un elemento.

La propiedad classList es de sólo lectura, sin embargo, se puede modificar utilizando el add() y remove() métodos.

Solución multi-navegador: La propiedad classList no es compatible con IE9 y anteriores. Sin embargo, se puede utilizar el className propiedad o expresiones regulares para una solución multi-navegador (ver "More Examples" en la parte inferior de esta página).

Soporte del navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.

Propiedad
classList	8.0	10.0	3.6	5.1	11.5

Sintaxis

element .classList

propiedades

Propiedad	Descripción
length	Devuelve el número de clases en la lista. Esta propiedad es de sólo lectura

métodos

Método	Descripción
add( class1, class2, ... )	Añade uno o más nombres de clase a un elemento. Si la clase especificada ya existe, no se agregará la clase
contains( class )	Devuelve un valor booleano que indica si un elemento tiene el nombre de la clase especificada. Valores posibles: cierto - el elemento contiene el nombre de la clase especificada falsa - el elemento no contiene el nombre de la clase especificada
item( index )	Devuelve el nombre de la clase con un número de índice especificado de un elemento. Índice comienza en 0. Devuelve un valor nulo si el índice está fuera de rango
remove( class1, class2, ... )	Elimina uno o más nombres de clase de un elemento. Nota: La eliminación de una clase que no existe, no arroja un error
toggle( class, true\|false)	Alterna entre un nombre de clase de un elemento. El primer parámetro elimina la clase especificada de un elemento, y devuelve falso. Si no existe la clase, que se añade al elemento, y el valor de retorno es cierto. El segundo parámetro opcional es un valor booleano que obliga a la clase que se añade o se elimina, independientemente de si es o no ya existía. Por ejemplo: Eliminar una clase: Elemento .classList. toggle("classToRemove", false) ; Añadir una clase: Elemento .classList. toggle("classToAdd", true) ; Nota: El segundo parámetro no es compatible con Internet Explorer u Opera 12 y anteriores.

Detalles técnicos

Valor de retorno:	A DOMTokenList, que contiene una lista de la clase name(s) de un elemento

Más ejemplos

Ejemplo

Añadir varias clases a un <div> elemento:

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

Inténtalo tú mismo "

Ejemplo

Eliminar una clase de un <div> elemento:

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

Inténtalo tú mismo "

Ejemplo

Quitar varias clases de un <div> elemento:

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

Inténtalo tú mismo "

Ejemplo

Alternar entre dos clases por un <div> elemento:

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

Inténtalo tú mismo "

Ejemplo

Obtener la clase name(s) de un <div> elemento:

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

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

El resultado de x será:

mystyle anotherClass thirdClass

Inténtalo tú mismo "

Ejemplo

Averiguar cuántos nombres de las clases de un <div> elemento tiene:

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

El resultado de x será:

Inténtalo tú mismo "

Ejemplo

Obtener el nombre de la clase primera (index 0) de un <div> elemento:

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

El resultado de x será:

mystyle

Inténtalo tú mismo "

Ejemplo

Averiguar si un elemento tiene un "mystyle" clase:

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

El resultado de x será:

true

Inténtalo tú mismo "

Ejemplo

Averiguar si un elemento tiene un "mystyle" clase. Si es así, retire otro nombre de la clase:

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

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

Inténtalo tú mismo "

Ejemplo

Alternar entre clases para crear un botón desplegable:

// 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');
      }
    }
}
}

Inténtalo tú mismo "

Ejemplo Fallback: añadir

Una solución multi-navegador cuando se utiliza el classList. add() método, para IE9 y anteriores:

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

if (x.classList) {
x.classList.add("mystyle");
} else {
x.className = "mystyle"; // For IE9 and earlier
}

Inténtalo tú mismo "

Ejemplo Fallback: eliminar

Una solución multi-navegador cuando se utiliza el classList. remove() método, por IE9 y anteriores:

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

if (x.classList) {
x.classList.remove("mystyle");
} else {
x.className = x.className.replace(/\bmystyle/g, ""); // For IE9 and earlier
}

Inténtalo tú mismo "

Fallback Ejemplo: contiene

Una solución multi-navegador cuando se utiliza el classList. contains() método, por IE9 y anteriores:

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

if (x.classList) {
alert(x.classList.contains("mystyle"));
} else {
alert(/\bmystyle/g.test(x.className)); // For IE9 and earlier
}

Inténtalo tú mismo "

Fallback Ejemplo: toggle

Una solución multi-navegador cuando se utiliza el classList. toggle() método, por 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(" ");
}

Inténtalo tú mismo "