TechCodeview

JavaScript classList es una propiedad DOM de JavaScript que permite diseñar las clases CSS (Hoja de estilo en cascada) de un elemento. ClassList de JavaScript es una propiedad de solo lectura que devuelve los nombres de las clases CSS. Es una propiedad de JavaScript con respecto a las otras propiedades de JavaScript que incluye estilo y nombre de clase. La propiedad de estilo devuelve el color u otro estilo del elemento de clase CSS, y className se utiliza para devolver los nombres de las clases utilizadas en el archivo CSS. Sin embargo, las propiedades className y classList devuelven el nombre de las clases que hemos utilizado en el archivo CSS pero de diferentes formas. La propiedad className devuelve el nombre de las clases en forma de cadena, mientras que la propiedad classList de javascript Devuelve el nombre de las clases en forma de matriz.

Aquí, realizaremos una breve discusión sobre JavaScript classList y también discutiremos sus métodos con sus implementaciones prácticas.

Ejemplo de propiedad classList de JavaScript

A continuación se muestra un ejemplo de la propiedad classList de JavaScript a través de la cual obtendremos el valor de clase de un elemento.

desactivar el modo desarrollador

 <h3>Click on the button to get the class value </h3><br> function getClass() { var e = document.getElementById(&apos;btn&apos;); alert(e.classList); } 

El resultado del código anterior se muestra a continuación:

Propiedad classList de JavaScript

La propiedad classList se utiliza para representar el valor de los elementos de clase, que es un Lista de tokens DOM objeto. Es una propiedad de solo lectura pero podemos modificar su valor manipulando las clases utilizadas en el programa. La propiedad classList de JavaScript consta de los siguientes métodos mediante los cuales podemos realizar diferentes operaciones en los elementos de la clase:

agregar():El método add() se utiliza para agregar una o más clases al elemento.eliminar():El método remove() se utiliza para eliminar una o más clases del número de clases presentes en el elemento.palanca():El método toggle() se utiliza para alternar los nombres de clase especificados de un elemento. Significa que con un clic se agrega la clase especificada y con otro clic se elimina la clase. Se conoce como propiedad de alternancia de un elemento.reemplazar():El método replace() se utiliza para reemplazar una clase existente con una nueva clase.contiene():El método contiene() de la propiedad classList de JavaScript se utiliza para devolver el valor booleano como salida. Si la clase está presente, el valor se devuelve como verdadero; de lo contrario, se devuelve falso.artículo():El método item() se utiliza para mostrar el nombre de las clases en el índice particular. Por tanto, devuelve el nombre de la clase.

Estos son algunos de los métodos que se utilizan en la lista de clases de JavaScript.

Discutiremos uno por uno.

código abs c

lista de clases.add()

La función que se utiliza para agregar una o más clases al elemento CSS.

Ejemplo:

El siguiente ejemplo muestra cómo agregar una clase usando el método classList.add():

 .myClass {background: red;} <h3> Click on the button and add the class</h3> <br> function getClass() { var e = document.getElementById(&apos;Btn&apos;); e.classList.add(&apos;myClass&apos;); } 

En el código, cuando el usuario hace clic en el botón, la nueva clase se agrega a las clases existentes. El resultado después de hacer clic en el botón se muestra a continuación:

lista de clases.remove()

La función remove() se utiliza para eliminar las clases existentes de los elementos.

El siguiente ejemplo muestra cómo eliminar una o más clases usando el método classlist.remove():

 .myClass {background: red;} <h3> Click on the button and remove the class </h3> <br> function getClass() { var e = document.getElementById(&apos;Btn&apos;); e.classList.remove(&apos;myClass&apos;); } 

En el código anterior, cuando el usuario hace clic en el botón, la clase especificada en particular se elimina de las clases CSS existentes. El resultado después de hacer clic en el botón se muestra a continuación:

Lista de clases.toggle()

El botón alternar() se utiliza para alternar clases al elemento. Significa agregar una nueva clase o eliminar las clases existentes.

A continuación se muestra un ejemplo que nos hará comprender cómo utilizar el método toggle() para agregar o eliminar clases.

Ejemplo:

 .myClass1{background: red;} .myClass2 {background: blue;} <h3> Click on the button to add or remove the class</h3> <br> function get_toggle() { var e = document.getElementById(&apos;Btn&apos;); e.classList.toggle(&apos;myClass2&apos;); } 

En el código, cuando el usuario hace clic en el botón, la clase se agregará o eliminará de las clases CSS. El resultado después de hacer clic en el botón se muestra a continuación:

cadena de análisis de Java a int

Lista de clases.contiene()

El método contiene() se utiliza para comprobar si la clase especificada existe en las clases CSS y, con respecto a ella, devuelve el valor booleano como verdadero o falso.

fecha a cadena

A continuación se muestra un ejemplo que muestra cómo buscar una clase si existe o no usando el método contiene():

Ejemplo:

 function getClass() { var e = document.getElementById(&apos;Btn&apos;); document.write(e.classList.contains(&apos;myClass&apos;)+&apos; <br>&apos;+&apos;myclass is the name of the class&apos;); } 

En el código anterior, se ve que cuando el usuario hace clic en el botón, busca la clase especificada si está presente en las clases CSS. Si está presente, se devolverá un valor booleano verdadero. De lo contrario, devolverá falso. El resultado del código anterior después de hacer clic en el botón se muestra a continuación:

lista de clases.reemplazar()

El método replace() se utiliza para reemplazar una clase existente por una nueva. No significa que la clase se elimine de los elementos, sino que las propiedades de la clase existente se reemplazan con las propiedades de la nueva clase.

A continuación se muestra un ejemplo mediante el cual entenderemos cómo podemos reemplazar una clase existente con una nueva clase:

Ejemplo:

java genera un número aleatorio

 .myClass1 {background: red;} .myClass2 {background: blue;} function replace_Class() { var e = document.getElementById('Btn'); e.classList.replace('myClass1', 'myClass2'); } 

En el código anterior, cuando el usuario hace clic en el botón, las propiedades de clase existentes se reemplazan con las nuevas propiedades de clase. El resultado después de hacer clic en el botón se muestra a continuación:

lista de clases.item()

La función item() se utiliza para devolver el nombre de la clase que está presente en el valor de índice especificado.

A continuación se muestra un ejemplo que nos hará comprender cómo utilizar el método item() para devolver el valor:

Ejemplo:

 <h3> Click on the button to get the specified index value</h3><br> function get_Class() { var e = document.getElementById(&apos;Btn&apos;); alert(e.classList.item(2)); } 

En el código, cuando el usuario hace clic en el botón, se mostrará la clase presente en el índice especificado. Después de hacer clic en el botón, obtenemos el valor de clase de índice especificado, como se muestra a continuación:

Estos son algunos de los métodos del objeto DOM classList y todo sobre classList.