¿Cómo se pueden cambiar dinámicamente los estilos de un elemento en una página web?

Se pueden utilizar los siguientes enfoques:

• Modificar la propiedad style del elemento: La forma más sencilla, modifica directamente los estilos en línea.

  const element = document.getElementById('myElement');
  element.style.color = 'red';
  element.style.fontSize = '20px';
  

• Agregar/eliminar clases CSS: Enfoque más flexible, basado en estilos predefinidos en CSS. Los estilos se cambian aplicando o quitando clases.

  const element = document.getElementById('myElement');
  element.classList.add('active'); // añade la clase 'active'
  element.classList.remove('inactive'); // elimina la clase 'inactive'
  element.classList.toggle('visible'); // alterna la clase 'visible'
  

  En CSS:

  .active {
      background-color: yellow;
  }
  .inactive {
      display: none;
  }
  .visible {
      opacity: 1;
  }
  

• Cambiar variables CSS (Propiedades personalizadas CSS): Permite modificar los valores de variables usadas en CSS, afectando los estilos de muchos elementos a la vez.

  const root = document.documentElement;
  root.style.setProperty('--main-color', 'blue');
  

  En CSS:

  :root {
      --main-color: #333;
  }
  .my-element {
      color: var(--main-color);
  }
  

• element.setAttribute('style', '...'): Menos recomendable que element.style, ya que sobrescribe todos los estilos en línea.

  const element = document.getElementById('myElement');
  element.setAttribute('style', 'color: green; border: 1px solid black;');
  

• Crear e insertar un elemento <style>: Permite agregar dinámicamente nuevas reglas CSS en la página.

  const style = document.createElement('style');
  style.innerHTML = '#myElement { background-color: lightblue; }';
  document.head.appendChild(style);
  

• Modificar las hojas de estilo (document.styleSheets): Interacción directa con los objetos Style Sheet. Se considera más complejo y menos común en el desarrollo cotidiano.

La elección del método depende de la tarea: element.style es conveniente para cambios pequeños y puntuales; las clases son preferibles para gestionar estados y estilos complejos; las variables CSS son útiles para temas y configuraciones globales.