La idea clave
CSS define los estilos; JavaScript puede activar uno de ellos añadiendo una clase. Así no necesitas escribir colores directamente en el código.
Ejemplo paso a paso
Este ejemplo muestra la idea en acción. Sigue los pasos y después cámbialo tú.
Ejemplo explicado{ js }
document.querySelector('#saludo').classList.add('resaltado');
Editar y probar este mismo ejemplo ↓
- El HTML comienza con un título sin destacar.
- La hoja CSS contiene una regla llamada .resaltado.
- classList.add asigna la clase; la vista previa cambia de aspecto.
Practica con código
Antes de empezar, piensa: ¿Por qué cambiará el aspecto aunque JavaScript no indique ningún color?
Sustituye add por remove para quitar la clase resaltado. Ejecuta y comprueba que el estilo ya no está aplicado.
El resultado que buscamosCon remove el título no está resaltado; con add sí.
HTML + CSS + JS Practica aquí
Tu misiónSustituye add por remove para quitar la clase resaltado. Ejecuta y comprueba que el estilo ya no está aplicado.
Vista previa aislada · Sin acceso al sitio principal
ConsolaLista para ejecutar.
Sin comprobar
Escribe tu cambio y pulsa «Comprobar solución». Puedes intentarlo tantas veces como quieras.
Listo
Necesito una pista
Conserva el nombre resaltado, porque también aparece en CSS.
Una pista más
Usa classList.remove('resaltado') en lugar de classList.add(...).
Ver solución y explicación
document.querySelector('#saludo').classList.remove('resaltado');
Qué debes recordar: classList cambia clases; el CSS determina la apariencia.
Práctica pendiente de corregir
La lectura, las prácticas corregidas y las autoevaluaciones guiadas se guardan por separado en este navegador.
Revisado editorialmente · Referencia técnica específica ↗