Cum poți modifica în mod dinamic stilurile unui element de pe o pagină web?

Puteți utiliza următoarele abordări:

• Modificarea proprietății style a elementului: Cea mai simplă metodă, modifică direct stilurile inline.

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

• Adăugarea/ștergerea claselor CSS: Abordare mai flexibilă, bazată pe stiluri predefinite în CSS. Modificările stilurilor se fac prin aplicarea sau eliminarea claselor.

  const element = document.getElementById('myElement');
  element.classList.add('active'); // adaugă clasa 'active'
  element.classList.remove('inactive'); // elimină clasa 'inactive'
  element.classList.toggle('visible'); // comută clasa 'visible'
  

  În CSS:

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

• Modificarea variabilelor CSS (Proprietăți personalizate CSS): Permite schimbarea valorilor variabilelor utilizate în CSS, influențând stilurile multor elemente simultan.

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

  În CSS:

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

• element.setAttribute('style', '...'): Mai puțin recomandat față de element.style, deoarece rescrie toate stilurile inline.

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

• Crearea și inserarea unui element <style>: Permite adăugarea dinamică a noilor reguli CSS pe pagină.

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

• Modificarea foilor de stil (document.styleSheets): Interacțiune directă cu obiectele Style Sheet. Este considerată mai complexă și mai puțin frecvent utilizată în dezvoltarea de zi cu zi.

Alegerea metodei depinde de sarcină: element.style este convenabil pentru modificări mici și punctuale; clasele sunt preferabile pentru gestionarea stărilor și stilurilor complexe; variabilele CSS sunt utile pentru teme și setări globale.