Kuidas saab dünaamiliselt muuta veebilehel oleva…

Võib kasutada järgmisi lähenemisviise:

Elementi style omaduse muutmine: Kõige lihtsam viis, otse muutes inline-stiile.

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

CSS klasside lisamine/eemaldamine: Paindlikum lähenemine, mis põhineb eelnevalt määratletud CSS-stiilidel. Stiile muudetakse klasside rakendamise või eemaldamise teel.

const element = document.getElementById('myElement');
element.classList.add('active'); // lisab klassi 'active'
element.classList.remove('inactive'); // eemaldab klassi 'inactive'
element.classList.toggle('visible'); // vahetab klassi 'visible'

CSS-is:

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

CSS muutujate (Custom Properties) muutmine: Võimaldab muuta CSS-is kasutatavate muutujate väärtusi, mõjutades paljude elementide stiile korraga.

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

CSS-is:

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

element.setAttribute('style', '...'): Vähem soovitatav võrreldes element.style-ga, kuna üle kirjutab kõik inline-stiilid.

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

<style>-elemendi loomine ja sisestamine: Võimaldab dünaamiliselt lisada uusi CSS-reegleid lehele.

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

Stiililehtede (document.styleSheets) otsene haldamine: Arvatakse keerulisemaks ja vähem levinud igapäevases arenduses.

Valik sõltub ülesandest: element.style sobib väikesteks, punktuaalseteks muudatusteks; klassid on paremad olekute ja keerukamate stiilide haldamiseks; CSS-muutujad on head teemade ja globaalsete seadistuste jaoks.

Kuidas saab dünaamiliselt muuta veebilehel oleva elemendi stiile?