Ինչպե՞ս կարող եք դինամիկ փոփոխել վեբ էջի տարրերի ոճերը։

Կարող եք օգտագործել հետևյալ մոտեցումները:

• Փոխել 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): Ուղիղ աշխատել Style Sheet օբյեկտների հետ: Սա ավելի բարդ և քիչ տարածված է օրական զարգացման մեջ:

Ընտրությունը կախված է խնդրից: element.style հարմար է փոքր, կետային փոփոխությունների համար; դասերը ավելի լավ են կառավարման համար և բարդ ոճերի համար; CSS փոփոխականները լավ են թեմաների և գլոբալ կարգավորումների համար: