Cómo modificar las clases de CSS en JavaScript

Cualquier desarrollador web comienza su viaje aprendiendo HTML, CSS y JavaScript. HTML da estructura a nuestras páginas web, JavaScript es un lenguaje de programación web que nos brinda la capacidad de interactuar con los usuarios, mientras que CSS nos brinda la capacidad de diseñar nuestras aplicaciones web y páginas web. Para manipular y trabajar con las clases de CSS, JavaScript nos ofrece Lista de clase y nombre de la clase Propiedades que se pueden usar para manipular el atributo de clase.

JavaScript puede usar el nombre de clase para manipular el elemento especificado, mientras que CSS usa ese nombre de clase para estilo ese elemento. Por lo tanto, en esta publicación, pasaremos por cómo modificar las clases de CSS en JavaScript, pero primero establecamos el entorno inicializando elementos en HTML y luego diseñando ese elemento en CSS en CSS.

Configuración del medio ambiente

Creemos un elemento Div que funcione como un contenedor y coloque dos elementos dentro de este contenedor. Uno será el H2 la etiqueta y la otra serán el pag etiqueta. Para vincular el archivo CSS a este HTML, hemos insertado un enlace etiqueta en la cabeza y hace referencia a nuestro archivo CSS dentro del atributo HREF (estilo.CSS)

Inglaterra

La capital de Inglaterra es Londres

Para obtener la referencia del div elemento dentro de CSS, hemos usado el atributo de clase. Realizamos un estilo en el contenedor Div, así como los elementos dentro del contenedor Div.

.envase
Color de fondo: RGB (54, 224, 207);

.contenedorh2, p
Color: RGB (125, 104, 184);

La salida se verá así:

Modificar las clases de CSS

Como se menciona en la parte introductoria de este artículo, JavaScript nos ofrece Lista de clase y nombre de la clase Propiedades que se pueden usar para manipular el atributo de clase.El nombre de la clase se usa para establecer un valor en una clase directamente, mientras que utilizando la propiedad de la lista de clases podemos realizar las siguientes funciones:

• Lista de clase.agregar() se usa para agregar valores de clase
• Lista de clase.palanca() se usa para encender o apagar una clase
• Lista de clase.reemplazar() se usa para reemplazar un valor de clase con otro valor de clase
• Lista de clase.contiene() se usa para verificar si existe o no un valor
• Lista de clase.eliminar() se usa para eliminar un valor de clase

Pasemos por un ejemplo para comprender mejor la propiedad de la lista de clases y sus métodos incorporados y usaremos el mismo código HTML y CSS que utilizamos anteriormente. Primero, usemos la propiedad ClassName para asignar una clase a la H2 atributo. Para ese propósito, hemos hecho referencia a una clase en CSS que no existe en este momento y le da un estilo que se muestra a continuación:

.información
Color de fondo: blanco;
borde: 2px negro sólido;

A continuación, obtenga la referencia del H2 elemento usando el QuerySelector ('H2') que seleccionará el primer elemento H2 en el código HTML. A continuación, use la propiedad ClassName para asignar el información clase al elemento H2. El código JavaScript se proporciona a continuación:

// Seleccione el primer elemento H2
const myh2 = documento.QuerySelector ('H2');
// Establecer la clase de información en MYH2
myh2.classname = 'info';

Para hacer referencia a este código JavaScript, use la etiqueta de script con el atributo SRC en el código HTML que proporciona el nombre del archivo JavaScript en el atributo SRC:

El código.js es nuestro nombre de archivo JavaScript. Nuestra página web ahora se verá así:

Vamos a modificar ahora las clases CSS usando el Lista de clase propiedad. Como se vio anteriormente, la propiedad de la lista de clases nos ofrece algunos métodos incorporados que podemos usar para modificar las clases de CSS. Usaremos el Lista de clase.agregar() que agregará una clase en el siguiente ejemplo:

// Seleccione el primer div
const hidediv = documento.QuerySelector ('div');
hundido.Lista de clase.agregar ('oculto'); // Clase oculta agregada

A continuación, vaya al archivo CSS e inicialice la clase oculta haciendo la pantalla NINGUNA para que el DIV no sea visible:

.oculto
Pantalla: ninguno;

Ahora verá que el elemento Div estará oculto y no verá nada en su página web:

Vamos a usar ahora el Lista de clase.reemplazar() Método donde reemplazaremos la clase oculta existente con otra envoltura de clase.

// Seleccione el primer div
const hidediv = documento.QuerySelector ('div');
hundido.Lista de clase.agregar ('oculto'); // Clase oculta agregada
hundido.Lista de clase.reemplazar ('oculto', 'envolver'); // reemplazar la clase oculta con la clase de información

A continuación, vaya a su archivo CSS y diseñe la clase de envoltura:

.envoltura
tamaño de fuente: grande;

Ahora verá que nuestro contenido ahora es visible y el tamaño de la fuente será más grande que antes:

Conclusión

JavaScript nos ofrece dos propiedades que podemos usar para modificar las clases de CSS; Lista de clase y nombre de la clase propiedad. El nombre de la clase la propiedad se utiliza para establecer un valor en una clase CSS directamente mientras que el Lista de clase nos da algunos métodos incorporados para manipular las clases de CSS.

Por ejemplo, el Lista de clase.agregar() nos da la capacidad de agregar valores de clase, Lista de clase.eliminar() nos da la capacidad de eliminar una clase, Lista de clase.palanca() nos da la capacidad de agregar alternación a una clase y al Lista de clase.reemplazar() nos da la capacidad de reemplazar un valor de clase con otra clase.

En esta publicación, vimos cómo modificar las clases de CSS usando JavaScript aprendiendo sobre dos propiedades de JavaScript; Lista de clase y nombre de la clase.