En este tutorial, aprenderás cómo seleccionar elementos HTML y modificar sus estilos CSS utilizando JavaScript. Hay varias formas de hacer esto, pero te mostraré dos métodos comunes: modificar el estilo directamente y agregar o quitar clases CSS.
Método 1: Modificar el estilo directamente
En este método, seleccionaremos un elemento HTML específico y modificaremos sus propiedades de estilo directamente utilizando JavaScript. Aquí hay un ejemplo:
HTML: Crear un archivo HTML con un elemento que desees modificar. Por ejemplo:
<!DOCTYPE html><html><head><title>Cambiar CSS con JavaScript</title></head><body><divid="miElemento">Este es mi elemento</div><buttononclick="cambiarColor()">Cambiar Color</button></body></html>// Función para cambiar el color del elementofunctioncambiarColor() {
var elemento = document.getElementById("miElemento");
elemento.style.color = "red";
elemento.style.backgroundColor = "yellow";
}
Cuando se hace clic en el botón “Cambiar Color”, el texto del elemento miElemento cambiará a rojo y el fondo se volverá amarillo.
Puedes ampliar estas técnicas y combinarlas con eventos y condiciones para crear interacciones más complejas en tu sitio web.
Muy buen aporte compañero me sirvió mucho!