Как може да се променят динамично стиловете на…

Можете да използвате следните подходи:

Промяна на свойството 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 е удобен за малки, точкови промени; класовете са по-подходящи за управление на състояния и сложни стилове; CSS променливите са полезни за теми и глобални настройки.

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