Hoe kun je de stijlen van een element op een…

Je kunt de volgende benaderingen gebruiken:

Wijzigen van de style-eigenschap van het element: De eenvoudigste manier, wijzigt direct de inline stijlen.

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

Toevoegen/verwijderen van CSS-klassen: Een flexibelere aanpak, gebaseerd op vooraf gedefinieerde stijlen in CSS. Stijlen worden gewijzigd door klassen toe te passen of te verwijderen.

const element = document.getElementById('myElement');
element.classList.add('active'); // voegt de klasse 'active' toe
element.classList.remove('inactive'); // verwijdert de klasse 'inactive'
element.classList.toggle('visible'); // schakelt de klasse 'visible' om

In CSS:

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

Wijzigen van CSS-variabelen (CSS Custom Properties): Hiermee kunnen de waarden van variabelen die in CSS worden gebruikt, worden gewijzigd, wat de stijlen van veel elementen tegelijk beïnvloedt.
```
const root = document.documentElement;
root.style.setProperty('--main-color', 'blue');
```
In CSS:
```
:root {
    --main-color: #333;
}
.my-element {
    color: var(--main-color);
}
```

element.setAttribute('style', '...'): Minder aanbevolen dan element.style, omdat het alle inline stijlen overschrijft.

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

Aanmaken en invoegen van een <style>-element: Hiermee kunnen nieuwe CSS-regels dynamisch aan de pagina worden toegevoegd.

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

Wijzigen van stylesheets (document.styleSheets): Directe interactie met Style Sheet-objecten. Wordt als complexer en minder gebruikelijk beschouwd in dagelijks gebruik.

De keuze van de methode hangt af van de taak: element.style is handig voor kleine, puntuele wijzigingen; klassen zijn beter voor het beheren van staten en complexe stijlen; CSS-variabelen zijn handig voor thema's en globale instellingen.

Hoe kun je de stijlen van een element op een webpagina dynamisch aanpassen?