Kaip dinamiškai keisti elemento stilių interneto…

Galima naudoti šiuos požiūrius:

Elemento style savybės keitimas: Paprasčiausias būdas, tiesiogiai modifikuoja inline stilius.

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

CSS klasių pridėjimas/panaikinimas: Labiau lankstus požiūris, pagrįstas iš anksto apibrėžtais stiliais CSS. Stiliai keičiasi taikant arba pašalinant klases.

const element = document.getElementById('myElement');
element.classList.add('active'); // prideda klasę 'active'
element.classList.remove('inactive'); // pašalina klasę 'inactive'
element.classList.toggle('visible'); // perjungia klasę 'visible'

CSS:

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

CSS kintamųjų (Custom Properties) keitimas: Leidžia keisti CSS naudojamų kintamųjų reikšmes, paveikiant daugelio elementų stilių vienu metu.

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

CSS:

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

element.setAttribute('style', '...'): Mažiau rekomenduojama nei element.style, nes perrašo visus inline stilius.

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

Sukurti ir įterpti <style> elementą: Leidžia dinamiškai pridėti naujus CSS taisykles į puslapį.

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

Stiliaus lapų (document.styleSheets) tiesioginis valdymas: Laikomas sudėtingesniu ir mažiau paplitusiu kasdienėje plėtroje.

Pasirinkimas priklauso nuo užduoties: element.style tinka mažiems, taškiniams pakeitimams; klases geriau valdyti būsenas ir sudėtingus stilius; CSS kintamieji yra naudingi temoms ir globaliems nustatymams.

Kaip dinamiškai keisti elemento stilių interneto puslapyje?