ClassList JavaScript | Explicado
Una característica DOM JavaScript llamada "Lista de clase"Se puede usar para diseñar las clases de CSS de un elemento. Es una propiedad JavaScript de solo lectura que se utiliza para representar la información incluida en la propiedad de clase de un elemento. Más específicamente, los nombres de las clases CSS son devueltos por la lista de clases llamada.
Esta redacción ilustrará la propiedad JavaScript de lista de clases y sus usos en JavaScript.
¿Qué es la lista de clases en JavaScript??
El "Lista de clase"¿Es el atributo de solo lectura de JavaScript DOM que representa los datos en la propiedad de clase de un elemento. Da los nombres de las clases CSS como salida. A pesar de ser de solo lectura, la lista de clases todavía se puede usar para cambiar las clases. Además, puede modificar las clases CSS dadas a un elemento HTML usando el objeto de lista de clases.
Sintaxis
Siga la sintaxis dada para usar el atributo de lista de clases:
elemento.Lista de clase;Aquí el "elemento"Es el elemento HTML.
Ejemplo
En este ejemplo, crearemos un botón asignando una clase llamada "botón"Y adjunte el evento OnClick () que generará los nombres de la clase asignada al botón cuando se active:
Haga clic para mostrar la clase asignada al botón
Ahora, estableceremos el radio de borde del botón como "2 cm"En el archivo CSS:
.botónBorder-Radius: 2 cm;
Vincularemos la hoja de estilo con el archivo HTML utilizando el "" etiqueta:
En el archivo JavaScript, defina una función "Buttonclick ()"De tal manera que cuando se invoca, en primer lugar, el documento.botón de acceso de método getElementById () usando su ID y luego muestre la clase asignada al botón en un método alert ():
función buttonclick ()var hacer clic = documento.getElementById ("BTN");
alerta (haga clic.Lista de clase);
Producción
Veamos los métodos de la propiedad JavaScript de clases.
¿Cuáles son los métodos de la propiedad de la lista de clases??
Hay algunos métodos de la propiedad de la lista de clases son los siguientes:
- agregar()
- eliminar()
- palanca()
- contiene()
- artículo()
- reemplazar()
La tabla dada a continuación comprende la descripción de los métodos mencionados:
| Métodos | Descripción |
| agregar() | Puede agregar una o más clases a un elemento con el método add (). |
| eliminar() | Para eliminar las clases de la lista de clases del elemento, use el método remover (). |
| palanca() | Alternar los nombres de clase particular de un elemento se realiza utilizando el método toggle (). La clase especificada se agrega con un clic, y la clase se elimina con otro clic. |
| contiene() | Para verificar si la clase dada existe en el elemento o no, utilice el método contener (). |
| artículo() | Se utiliza para mostrar los nombres de las clases que están presentes en el índice específico. |
| reemplazar() | Una clase existente se puede reemplazar con una nueva clase utilizando el método reemplazar (). |
Ahora, discutiremos algunos métodos de uso común de la lista de clases.
Ejemplo 1: Cómo usar el método add () de la propiedad de la lista de clases?
Agregaremos nuevas clases en el botón haciendo clic en el nuevo "Agregar clase al botón":
Luego, crea dos clases "btncolor" y "texto en negrita"Eso agregará el color de fondo de los botones y en negrita el texto del botón:
.btncolorColor de fondo: Blueviolet;
.texto en negrita
Font-Weight: Bold;
En el archivo JavaScript, defina una función llamada "addClass ()"Eso llamará al"agregar()Método de la lista de clases con el nombre de la clase como argumento agregado en la clase del botón:
función addClass ()var newclass = documento.GetElementById ("BTN").Lista de clase;
Nueva clase.agregar ("btncolor");
Nueva clase.Agregar ("BoldText");
La salida indica que las nuevas clases se agregan en el botón "Haga clic aquí" cuando "Agregar clase al botón"Se hace clic. Luego, haga clic en el "Haga clic aquíBotón para mostrar la lista de clases:
Ejemplo 2: Cómo usar el método Remove () de la propiedad de clases?
Ahora eliminaremos una clase de la lista. Para hacerlo, crearemos un nuevo botón "Eliminar la clase del botón"Y adjunte un evento OnClick () con él:
Definiremos una función "removeclass ()"En el archivo JavaScript para eliminar la clase"btncolor"De la lista de las clases:
función removeClass ()var newclass = documento.GetElementById ("BTN").Lista de clase;
Nueva clase.eliminar ("btncolor");
Como puede ver en la salida, el "Haga clic aquí"El botón mostró una clase llamada"botón"Y luego cuando el"Agregar clase al botón"Se hace clic, dos nuevas clases"texto en negrita" y "btncolor"Se agregan a la lista, y el color de fondo del botón también se cambia. Por último, haciendo clic en el "Eliminar la clase del botón"Eliminará el"btncolorClase de la lista:
Ejemplo 3: Cómo usar el método toggle () de la propiedad de la lista de clases?
Ahora, usaremos el método toggle () para alternar la lista de clases con un solo clic y eliminaremos en otro clic:
En el archivo JavaScript, defina una función "toggleclass ()"Eso primero agregará el color del botón en un solo clic y luego lo eliminará en el otro clic:
function togGlecLass ()var newclass = documento.GetElementById ("BTN").Lista de clase;
Nueva clase.toggle ("btncolor");
La salida correspondiente es la siguiente:
Todas las pautas fundamentales para la propiedad JavaScript de clases se han cubierto.
Conclusión
El "Lista de clase"Es el atributo de solo lectura de JavaScript que da los nombres de las clases CSS asignadas al elemento HTML. Permite cambiar las clases de CSS con la ayuda de sus métodos predefinidos, incluidos add (), remove (), toggle () y así sucesivamente. En este artículo, hemos ilustrado la propiedad de JavaScript de clases y sus métodos con ejemplos detallados.