Cómo agregar clase activa en JavaScript

Mientras desarrolla un sitio web, a veces su código se vuelve tan largo y complejo que no puede agregar o eliminar ID de CSS o clases individualmente. Para abordar tales situaciones, puede usar JavaScript para agregar clases activas para el estilo o para cumplir con otros propósitos. JavaScript proporciona diferentes métodos para resolver el problema complejo establecido instantáneamente.

Este manual explicará el procedimiento de agregar una clase activa en JavaScript.

Cómo agregar clase activa en JavaScript?

Para agregar una clase activa, utilizaremos los siguientes métodos:

• documento.getElementById ()
• documento.QuerySelector ()

Vamos al primer método!

Método 1: Usar documento.getElementById () con classist.Método add () para agregar clase activa en JavaScript

En JavaScript, el "documento.getElementById ()El método se utiliza para acceder a un cierto elemento por su identificación. Sin embargo, solo selecciona los elementos según sus ID, no en clases. Puedes usarlo con el "Lista de clase.agregar()Método para agregar una clase activa en JavaScript.

Exploremos este método tomando un ejemplo.

Ejemplo

En nuestro archivo HTML, tomaremos el "

"Etiqueta con algún texto, especifique su ID como"TXT", Y agregue un"al hacer clic"Evento que activará el"activar()" función. Tenga en cuenta que, agregue el

Etiqueta dentro de la etiqueta:

Pulse aquí

En el archivo JavaScript, defina la función activate () de tal manera que accede en primer lugar al elemento de párrafo utilizando su ID en el documento.método getElementById (). Luego, agregue una clase CSS a su lista de clases para fines de estilo:

función activate ()
var a = documento.getElementById ("txt");
a.Lista de clase.Agregar ("NewClass");

En el archivo CSS, coloque un punto antes "Nueva clase"Y asigne el"color de fondo"Propiedad un valor"naranja":

.Nueva clase
Color de fondo: naranja;

Como resultado, cuando haga clic en el elemento de párrafo, la propiedad de fondo agregada se aplicará a ella:

Echemos un vistazo al siguiente método en el que usaremos el documento.QuerySelector () para agregar una clase activa.

Método 2: Usar documento.QuerySelector () con clase.Método add () para agregar clase activa en JavaScript

En JavaScript, el "documento.QuerySelector ()El método se utiliza para obtener el primer elemento del código. Puede especificar clases e ID tanto dentro del método QuerySelector (). Se puede usar con el "Lista de clase.agregar()Método para agregar una clase activa en JavaScript.

Ejemplo

Ahora solo usaremos el "documento.QuerySelector ()"Con ID"#TXT"Para seleccionar el elemento de párrafo. De nuevo, la lista de clases.El método add () se utilizará para agregar el activo "Nueva clase":

función activate ()
var a = documento.QuerySelector ("#txt");
a.Lista de clase.Agregar ("NewClass");

Producción

Hemos aprendido dos métodos más simples para agregar clase activa en JavaScript

Conclusión

Para agregar clase activa, podemos utilizar el "getElementById ()" o "QuerySelector ()"Con la lista de clases.método add (). Ambos métodos mencionados obtienen elementos de su identificación primero, luego utilizando classlist.Método add (), el nuevo nombre de clase asignado al elemento que se puede utilizar para fines de estilo. Esta publicación ha descrito el procedimiento relacionado con agregar una clase activa en JavaScript.