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>
<div id="miElemento">Este es mi elemento</div>
<button onclick="cambiarColor()">Cambiar Color</button>
</body>
</html>
- JavaScript: Agregar JavaScript para cambiar el color del elemento cuando se hace clic en el botón
// Función para cambiar el color del elemento
function cambiarColor() {
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.
Curso Práctico de JavaScript
