CursosEmpresasBlogLiveConfPrecios

Modificar Estilos CSS con JavaScript: Propiedad Style y ClassName

Clase 8 de 27 • Curso de JavaScript: Manipulación del DOM

Clase anteriorSiguiente clase
Resumen

¿Cómo modificar estilos CSS con JavaScript?

Modificar estilos CSS mediante JavaScript es esencial para crear webs dinámicas e interactivas. Este proceso permite cambiar características visuales del HTML según el comportamiento del usuario. Aquí exploraremos cómo lograrlo usando la consola del navegador y las propiedades adecuadas.

¿Qué son las propiedades style y cómo se usan en JavaScript?

JavaScript proporciona múltiples formas para modificar estilos, empezando con la propiedad style. Esta herramienta permite agregar estilos en línea directamente en el HTML, pero requiere precaución: los estilos en línea poseen alta especificidad, sobreescribiendo potencialmente estilos predefinidos en clases CSS.

const title = document.querySelector('h1');
title.style.color = 'red';

Con este código, estamos cambiando el estilo del encabezado h1 para que el texto sea rojo. Esto se reflejará directamente en el HTML, como un estilo en línea.

¿Qué problemas puede causar el uso de la propiedad style?

Al usar la propiedad style, un error común es reescribir estilos no deseados, perdiendo consistencia visual. Por ejemplo, cambiar el color de fondo de un menu así:

const menu = document.querySelector('.menu');
menu.style.backgroundColor = 'red';

Aunque el estilo original puede ser azul en CSS, el uso de estilos en línea prevalecerá, cambiándolo a rojo.

¿Cómo utilizar className para modificación de estilos?

Otra opción es className, la cual modifica directamente las clases existentes en un elemento. Es importante saber que className reemplazará cualquier clase existente con una nueva.

menu.className = 'main-menu';

Esto cambiará cualquier clase previa aplicada al menu por main-menu. Valores CSS anteriores se perderán si no están definidos en la nueva clase.

¿Consejos para trabajar con estilos en JavaScript?

  • Precaución con la especificidad: Usar estilos en línea puede alterar el diseño por sobreescribir CSS preexistentes.
  • Utilizar className sabiamente: Al añadir o cambiar una clase, asegúrate de que no se pierdan estilos necesarios.
  • Conocer las propiedades disponibles: Familiarízate con las listas de propiedades CSS que puedes manipular mediante JavaScript.

Modificar estilos con JavaScript es poderoso y flexible, pero hacerlo correctamente asegura la estabilidad y estética del proyecto. Explora estas técnicas, práctica, y agrega nuevas capas de interacción a tus proyectos web. ¡Sigue explorando y desarrollando habilidad en el fascinante mundo del desarrollo web!