როგორ შეიძლება დინამიურად შეიცვალოს ელემენტის სტილები ვებგვერდზე?

შესაძლებელია გამოყენება შემდეგი მიდგომები:

• ელემენტის style თვისების შეცვლა: ყველაზე მარტივი გზა, პირდაპირ შეცვლის inline სტილებს.

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

• CSS კლასების დამატება/წაშლა: უფრო მოქნილი მიდგომა, დაფუძნებულია წინასწარ განსაზღვრულ სტილებზე CSS-ში. სტილები იცვლება კლასების გამოყენებით ან ამოღებით.

  const element = document.getElementById('myElement');
  element.classList.add('active'); // დამატება კლასის 'active'
  element.classList.remove('inactive'); // ამოღება კლასის 'inactive'
  element.classList.toggle('visible'); // გადართვა კლასის 'visible'
  

  CSS-ში:

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

• CSS ცვლადების (Custom Properties) შეცვლა: საშუალებას აძლევს შეცვალოს CSS-ში გამოყენებული ცვლადების მნიშვნელობები, რაც გავლენას ახდენს მრავალ ელემენტზე ერთდროულად.

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

  CSS-ში:

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

• element.setAttribute('style', '...'): ნაკლებად რეკომენდებულია element.style-თან შედარებით, რადგან გადაზრდის ყველა inline სტილს.

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

• შექმნა და ჩასმა <style> ელემენტი: საშუალებას აძლევს დინამიურად დაამატოთ ახალი CSS წესები გვერდზე.

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

• სტილების ფურცლების (document.styleSheets) პირდაპირი მართვა: უფრო რთული და ნაკლებად გავრცელებული ყოველდღიურ განვითარებაში.

მოდელის არჩევა დამოკიდებულია ამოცანაზე: element.style სასარგებლოა მცირე, წერტილოვანი ცვლილებებისთვის; კლასები უკეთესია მდგომარეობების მართვის და კომპლექსური სტილებისთვის; CSS ცვლადები კარგია თემებისთვის და გლობალური პარამეტრებისთვის.