Hogyan lehet dinamikusan módosítani egy elem…

A következő megközelítéseket lehet alkalmazni:

Az elem style tulajdonságának módosítása: A legegyszerűbb módszer, közvetlenül módosítja az inline stílusokat.

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

CSS osztályok hozzáadása/törlése: Rugalmasabb megközelítés, előre definiált stílusokra alapozva a CSS-ben. A stílusok változása osztályok alkalmazásával vagy eltávolításával történik.

const element = document.getElementById('myElement');
element.classList.add('active'); // hozzáadja az 'active' osztályt
element.classList.remove('inactive'); // eltávolítja az 'inactive' osztályt
element.classList.toggle('visible'); // váltogatja a 'visible' osztályt

CSS-ben:

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

CSS változók módosítása (CSS egyedi tulajdonságok): Lehetővé teszi a CSS-ben használt változók értékeinek módosítását, ami több elem stílusát befolyásolja egyszerre.
```
const root = document.documentElement;
root.style.setProperty('--main-color', 'blue');
```
CSS-ben:
```
:root {
    --main-color: #333;
}
.my-element {
    color: var(--main-color);
}
```

element.setAttribute('style', '...'): Kevésbé ajánlott a element.style-hez képest, mivel felülírja az összes inline stílust.

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

<style> elem létrehozása és beszúrása: Lehetővé teszi dinamikusan új CSS-szabályok hozzáadását az oldalhoz.

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

Stíluslapok módosítása (document.styleSheets): Közvetlen interakció a Style Sheet objektumokkal. Komplexebb és kevésbé elterjedt a mindennapi fejlesztésben.

A módszer kiválasztása a feladattól függ: az element.style alkalmas kis, pontszerű változtatásokhoz; a osztályok jobbak az állapotok és összetettebb stílusok kezeléséhez; a CSS változók jók témákhoz és globális beállításokhoz.

Hogyan lehet dinamikusan módosítani egy elem stílusait egy weboldalon?