En la fase de diseño de una página web o un sitio web, hay ciertas situaciones en las que ya no es necesario acceder a algunos elementos en particular debido a alguna actualización. Además, cuando existe la necesidad de asignar más de una clase a un elemento específico en html. En tales escenarios de casos, cambiar la clase de un elemento HTML en JavaScript es de gran ayuda para atender tales situaciones.
Este blog demostrará los enfoques a considerar al cambiar 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: cambiar la clase de un elemento HTML con JavaScript utilizando la propiedad className
Este enfoque puede entrar en vigor accediendo a la clase creada asociada con un elemento y asignándole una clase diferente.
El siguiente ejemplo demuestra el concepto establecido.
Ejemplo
En el código dado a continuación dentro del '
Más adelante en el código, incluya el siguiente mensaje en el ' ” para mostrarlo en el DOM tras la transformación de la clase:
Código HTML:
< cuerpo estilo = 'alinear texto: centro;' >< h2 > Cambiar elemento Nombre de la clase
El nombre de la clase anterior es: clase predeterminada
En el código JS, declara una función llamada ' Clase() ”. Aquí, acceda a la clase predeterminada por su id usando el ' documento.getElementById() ' método. Los ' nombre de la clase La propiedad ' transformará la clase creada en la clase denominada ' Nueva clase ”.
Finalmente, el ' textointerno ” mostrará el siguiente mensaje junto con la clase modificada:
Código JS:
función Clase ( ) {documento.getElementById ( 'miBoton' ) .nombreDeClase = 'Nueva clase' ;
var acceso = documento.getElementById ( 'miBoton' ) .nombre de la clase;
documento.getElementById ( 'cabeza' ) .innerHTML = 'El nuevo nombre de la clase es: ' + acceso;
}
Producción
En la salida anterior, observe el cambio de ' clase ” a la derecha al hacer clic en el botón en DOM.
Enfoque 2: cambiar la clase de un elemento HTML con JavaScript utilizando la propiedad classList
Este enfoque particular se puede implementar para eliminar la clase especificada y asignarle una nueva clase cambiándola.
Ejemplo
En primer lugar, repita los métodos discutidos anteriormente para incluir un encabezado, creando un botón con la clase asignada, la identificación y el evento onclick adjunto que invoca la función especificada. A continuación, agregue de manera similar la sección de encabezado en el ' ” etiqueta para notificar al usuario de la clase cambiada al hacer clic en el botón:
código HTML
< cuerpo estilo = 'alinear texto: centro;' >< h2 > Cambiar clase de elemento ! h2 >
< botón clase = 'Sitio web' al hacer clic = 'Clase()' identificación = 'cambio' > Haz click en mi botón >
< h3 identificación = 'cabeza' estilo = 'color de fondo: gris claro'; > El antiguo nombre de la clase es: Sitio web h3 >
cuerpo >
Ahora, declara una función llamada “ Clase() ”. En su definición, aplica el “ Lista de clase ” propiedad junto con el “ retirar() ” para omitir la clase a la que se accede denominada “ Sitio web ” que corresponde al botón creado.
En el siguiente paso, asigne una nueva clase a la misma clase usando la propiedad discutida con el ' agregar() ' método. Por último, muestre la clase cambiada como se discutió en el enfoque anterior:
Código JS
función Clase ( ) {documento.getElementById ( 'cambio' ) .classList.remove ( 'Sitio web' )
documento.getElementById ( 'cambio' ) .classList.añadir ( 'linux' ) ;
var acceso = documento.getElementById ( 'cambio' ) .Lista de clase;
documento.getElementById ( 'cabeza' ) .innerHTML = 'El nuevo nombre de la clase es: ' + acceso;
}
Producción
Este artículo pretendía aclarar el concepto de cambiar la clase del elemento HTML usando JavaScript.
Conclusión
Los ' nombre de la clase ' y ' Lista de clase Las propiedades ” se pueden utilizar para cambiar la clase de un elemento HTML. La propiedad className condujo a un enfoque más rápido para realizar el requisito deseado en comparación con la propiedad classList, ya que implicaba menos complejidad de código. La propiedad classList, por otro lado, cambió la clase predeterminada con la ayuda de dos métodos adicionales. Este artículo ilustró los enfoques para cambiar la clase del elemento HTML con JavaScript.