Ako možno dynamicky meniť štýly prvku na webovej…

Môžu sa použiť nasledujúce prístupy:

Zmena vlastnosti style prvku: Najjednoduchší spôsob, priamo upravuje inline štýly.

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

Pridanie/odstránenie CSS tried: Flexibilnejší prístup, založený na preddefinovaných štýloch v CSS. Zmeny štýlov sa vykonávajú použitím alebo odstránením tried.

const element = document.getElementById('myElement');
element.classList.add('active'); // pridá triedu 'active'
element.classList.remove('inactive'); // odstráni triedu 'inactive'
element.classList.toggle('visible'); // prepne triedu 'visible'

V CSS:

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

Zmena CSS premenných (CSS Custom Properties): Umožňuje meniť hodnoty premenných používaných v CSS, ovplyvňujúc štýly viacerých prvkov naraz.

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

V CSS:

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

element.setAttribute('style', '...'): Menej odporúčané v porovnaní s element.style, pretože prepíše všetky inline štýly.

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

Vytvorenie a vloženie <style> elementu: Umožňuje dynamicky pridávať nové CSS pravidlá na stránku.

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

Zmena štýlových listov (document.styleSheets): Priame manipulovanie s objektmi Style Sheet. Považuje sa za zložitejšie a menej bežné v každodennom vývoji.

Výber metódy závisí od úlohy: element.style je vhodný pre malé, bodové zmeny; triedy sú vhodnejšie na správu stavov a komplexnejších štýlov; CSS premenné sú vhodné pre témy a globálne nastavenia.

Ako možno dynamicky meniť štýly prvku na webovej stránke?