Jak lze dynamicky měnit styly prvku na webové…

Můžete použít následující přístupy:

Změna vlastnosti style prvku: Nejjednodušší způsob, přímo upravuje inline styly.

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

Přidání/odebrání CSS tříd: Flexibilnější přístup, založený na předdefinovaných stylech v CSS. Změny stylů se provádějí aplikací nebo odebráním tříd.

const element = document.getElementById('myElement');
element.classList.add('active'); // přidá třídu 'active'
element.classList.remove('inactive'); // odebere třídu 'inactive'
element.classList.toggle('visible'); // přepíná třídu 'visible'

V CSS:

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

Změna CSS proměnných (Vlastní vlastnosti CSS): Umožňuje měnit hodnoty proměnných používaných v CSS, ovlivňujících styly mnoha prvků najednou.

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', '...'): Méně doporučováno ve srovnání s element.style, protože přepíše všechny inline styly.

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

Vytvoření a vložení <style> elementu: Umožňuje dynamicky přidávat nové CSS pravidla na stránku.

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

Úprava stylových listů (document.styleSheets): Přímá práce s objekty Style Sheet. Považuje se za složitější a méně běžné v každodenním vývoji.

Volba metody závisí na úkolu: element.style je vhodný pro malé, bodové změny; třídy jsou vhodnější pro správu stavů a složitých stylů; CSS proměnné jsou vhodné pro témata a globální nastavení.

Jak lze dynamicky měnit styly prvku na webové stránce?