Как можно динамически изменять стили у элемента на веб-странице?

Можно использовать следующие подходы:

• Изменение свойства 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-переменных (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 удобен для небольших, точечных изменений; классы preferable для управления состояниями и комплексными стилями; CSS-переменные хороши для тем и глобальных настроек.