Cómo cambiar la clase de un elemento HTML con JavaScript?
En la fase de diseño de una página web o un sitio web, hay ciertas situaciones en las que ya no necesita acceder a algunos elementos particulares debido a alguna actualización. Además, cuando es necesario asignar más de una clase a un elemento específico en HTML. En tal caso, los escenarios, cambiar la clase de un elemento HTML en JavaScript es de gran ayuda para atender tales situaciones.
Este blog demostrará los enfoques a considerar mientras cambia la clase de un elemento HTML en JavaScript.
Cómo cambiar la clase de un elemento HTML con JavaScript?
Para cambiar la clase de un elemento HTML con JavaScript, se pueden aplicar los siguientes enfoques:
-
- "nombre de la clase" propiedad.
- "Lista de clase" propiedad.
Enfoque 1: Cambie la clase de un elemento HTML con JavaScript utilizando la propiedad ClassName
Este enfoque puede entrar en vigencia accediendo a la clase creada asociada con un elemento y asignándolo una clase diferente.
El siguiente ejemplo demuestra el concepto declarado.
Ejemplo
En el código dado a continuación dentro del ""Etiqueta, incluya el siguiente encabezado en el"" etiqueta. Después de eso, cree el botón especificado que se le asignará un valor predeterminado "clase"Que se cambiará más adelante en el código. Además, asigne un "identificación"Y un adjunto"al hacer clic"Evento invocando la clase de funciones ().
Más adelante en el código, incluya el siguiente mensaje en el " Código HTML: Cambiar el nombre de clase del elemento El nombre de la clase anterior es: clase predeterminada Finalmente, el "intexto"La propiedad mostrará el siguiente mensaje junto con la clase cambiada: Código JS: Enfoque 2: Cambie la clase de un elemento HTML con JavaScript utilizando la propiedad de la lista de clases Este enfoque particular se puede implementar para eliminar la clase especificada y asignarle una nueva clase. Ejemplo En primer lugar, repita los métodos discutidos anteriormente para incluir un encabezado, creando un botón con la clase asignada, ID y el evento OnClick adjunto invocar la función especificada. A continuación, de manera similar, agregue la sección de encabezado en el " código HTML Cambiar clase de elemento! En el siguiente paso, asigne una nueva clase a la misma clase utilizando la propiedad discutida con el "agregar()" método. Por último, muestre la clase cambiada como se discutió en el enfoque anterior: Código JS Conclusión El "nombre de la clase" y "Lista de claseLas propiedades se pueden utilizar para cambiar la clase de un elemento HTML. La propiedad de nombre de clase condujo a un enfoque más rápido para realizar el requisito deseado en comparación con la propiedad de la lista de clases, ya que involucraba menos complejidad del código. La propiedad de la lista de clases, por otro lado, cambió la clase predeterminada con la ayuda de dos métodos adicionales. Este artículo ilustra los enfoques para cambiar la clase del elemento HTML con JavaScript.
Haz click en mi
En el código JS, declare una función llamada "Clase()". Aquí, acceda a la clase predeterminada por su ID usando el "documento.getElementById ()" método. El "nombre de la clase"La propiedad transformará la clase creada en la clase llamada"Nueva clase".clase class ()
documento.getElementById ('myButton').className = "NewClass";
VAR Access = documento.getElementById ('myButton').nombre de la clase;
documento.getElementByID ('cabeza').innerhtml = "El nombre de la nueva clase es:" + Access;
Producción
En la salida anterior, observe el cambio del "clase"A la derecha al hacer clic en el botón en DOM.El nombre de la clase antigua es: sitio web
Ahora, declare una función llamada "Clase()". En su definición, aplique el "Lista de clase"Propiedad junto con el"eliminar()"Método para omitir la clase accedida nombrada"Sitio web"Que corresponde al botón creado.clase class ()
documento.GetElementById ('Cambio').Lista de clase.Eliminar ("Sitio web")
documento.GetElementById ('Cambio').Lista de clase.agregar ("Linuxhint");
VAR Access = documento.GetElementById ('Cambio').Lista de clase;
documento.getElementByID ('cabeza').innerhtml = "El nombre de la nueva clase es:" + Access;
Producción
Esta redacción significaba borrar el concepto de cambiar la clase del elemento HTML usando JavaScript.