Kā dinamiski mainīt elementa stilus tīmekļa lapā…

Var izmantot šādus pieejas:

Elementa style īpašības maiņa: Visvienkāršākais veids, tieši modificējot inline stilus.

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

CSS klases pievienošana/noņemšana: Elastīgāka pieeja, balstīta uz iepriekš definētiem stiliem CSS. Stili tiek mainīti, piemērojot vai noņemot klases.

const element = document.getElementById('myElement');
element.classList.add('active'); // pievieno klasi 'active'
element.classList.remove('inactive'); // noņem klasi 'inactive'
element.classList.toggle('visible'); // pārslēdz klasi 'visible'

CSS:

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

CSS mainīgo (Custom Properties) maiņa: Ļauj mainīt CSS izmantoto mainīgo vērtības, ietekmējot daudzu elementu stilus vienlaicīgi.

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

CSS:

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

element.setAttribute('style', '...'): Mazāk ieteicams nekā element.style, jo pārraksta visus inline stilus.

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

Izveidot un ievietot <style> elementu: Ļauj dinamiskā veidā pievienot jaunus CSS noteikumus lapai.

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

Stila lapu (document.styleSheets) tieša pārvaldība: Uzskatāma par sarežģītāku un mazāk izplatītu ikdienas izstrādē.

Izvēle ir atkarīga no uzdevuma: element.style ir piemērots nelielām, punktveida izmaiņām; klases ir labākas stāvokļu pārvaldībai un sarežģītākiem stiliem; CSS mainīgie ir noderīgi tēmām un globālām iestatījumiem.

Kā dinamiski mainīt elementa stilus tīmekļa lapā?