Kako dinamički menjati stilove elementa na veb…

Могу се користити следећи приступи:

Измена својства 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 је погодан за мања, тачкастa ажурирања; класе су пожељне за управљање стањима и сложенијим стиловима; CSS променљиве су добре за теме и глобалне поставке.

Kako dinamički menjati stilove elementa na veb stranici?