Latest web development tutorials

propiedad HTML DOM classList

Elementos objeto de referencia objeto Element

Ejemplos

Para el elemento <div> para añadir la clase:

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

Trate »

Definición y Uso

classList propiedad devuelve el nombre de la clase del elemento, como objeto DOMTokenList.

Esta propiedad se utiliza en el elemento para agregar, eliminar y cambiar de clase CSS.

classList propiedad es de sólo lectura, pero se puede utilizar el add () y remove () método para modificarlo.


Soporte para el navegador

Las cifras de la tabla representan el primer navegador compatible con el número de versión de propiedad.

propiedad
classList 8.0 10.0 3.6 5.1 11.5

gramática

elemento .classList

propiedades

propiedad descripción
longitud Devuelve el número de la clase lista de clases

Esta propiedad es de sólo lectura

camino

camino descripción
añadir (clase 1, clase 2, ...) Agregar uno o más nombres de clase en el elemento.

Si el nombre de la clase especificada ya existe, no va a añadir / td>
contiene (clase) Devuelve un valor booleano, se determina si la presencia del nombre de la clase especificada.

Valores posibles:

  • verdad - paquete elemento ya contiene un nombre de clase
  • falsa - elemento no existe en el nombre de la clase
elemento (índice) Devuelve el nombre de clase en el valor del índice elemento. Los valores de índice empiezan desde cero.

Si el valor del índice está fuera del rango de alcance o nula
eliminar (clase 1, clase 2, ...) Eliminar uno o más elementos del nombre de la clase.

Nota: La eliminación del nombre de la clase que no existe, no se queja.
de palanca (clase, true | false) Cambio de nombres de clase en el elemento.

El primer parámetro es el nombre de la clase que desea eliminar el elemento y devuelve falso.
Si no existe el nombre de la clase, que se sumará a los nombres de las clases en el elemento y devuelve true.

El segundo es un parámetro opcional es un valor booleano que se utiliza para establecer si el elemento es obligatorio para añadir o eliminar categorías, independientemente de que existe el nombre de la clase. Por ejemplo:

Retirar una clase: Elemento .classList.toggle ( "classToRemove" , false);
Añadir una clase: Elemento .classList.toggle ( "classToAdd" , true);

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

Descripción técnica

Devuelve: Un DOMTokenList, clase de lista de nombres contiene elementos

Ejemplos

más ejemplos

Ejemplos

Para el elemento <div> para agregar más categorías:

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

Trate »

Ejemplos

Retirar una clase para el elemento <div>:

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

Trate »

Ejemplos

Para el elemento <div> para quitar varias clases:

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

Trate »

Ejemplos

Para el elemento <div> para cambiar categorías:

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

Trate »

Ejemplos

Obtener el nombre de la clase elemento <div>:

<Div id = "myDiv" clase = "mystyle anotherClass thirdClass"> Soy un elemento DIV </ div>

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

x La salida es:

mystyle anotherClass thirdClass

Trate »

Ejemplos

Consulte <div> elemento tiene un número de nombres de las clases:

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

x La salida es:

3

Trate »

Ejemplos

Obtener <div> en un nombre de clase primera (índice 0):

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

x La salida es:

mystyle

Trate »

Ejemplos

Véase el elemento existe la categoría "mystyle":

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

x La salida es:

verdadero

Trate »

Ejemplos

Véase el elemento existe la categoría "mystyle", si está presente quitar otro nombre de la clase:

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

si (x.classList.contains ( "mystyle") ) {
x.classList.remove ( "anotherClass");
} Else {
alert ( "No se pudo encontrar. ");
}

Trate »

Artículos relacionados

CSS tutorial: selectores CSS

CSS Referencia: selectores CSS .class

Manual de HTML DOM Referencia: atributo HTML DOM className

Manual de HTML DOM Referencia: HTML DOM getElementsByClassName () método

Manual de HTML DOM Referencia: DOM HTML del objeto Estilo

Elementos objeto de referencia objeto Element