Comment peut-on modifier dynamiquement les styles…

Vous pouvez utiliser les approches suivantes:

Modifier la propriété style de l'élément : La méthode la plus simple, modifie directement les styles en ligne.

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

Ajouter/supprimer des classes CSS : Approche plus flexible, basée sur des styles prédéfinis en CSS. Les styles changent en appliquant ou en retirant des classes.

const element = document.getElementById('myElement');
element.classList.add('active'); // ajoute la classe 'active'
element.classList.remove('inactive'); // retire la classe 'inactive'
element.classList.toggle('visible'); // bascule la classe 'visible'

En CSS:

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

Changer les variables CSS (Propriétés personnalisées CSS) : Permet de modifier les valeurs des variables utilisées en CSS, influant sur le style de plusieurs éléments simultanément.
```
const root = document.documentElement;
root.style.setProperty('--main-color', 'blue');
```
En CSS:
```
:root {
    --main-color: #333;
}
.my-element {
    color: var(--main-color);
}
```

element.setAttribute('style', '...') : Moins recommandé que element.style, car écrase tous les styles en ligne.

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

Créer et insérer un élément <style> : Permet d'ajouter dynamiquement de nouvelles règles CSS à la page.

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

Modifier les feuilles de style (document.styleSheets) : Interaction directe avec les objets Style Sheet. Considéré comme plus complexe et moins courant dans le développement quotidien.

Le choix de la méthode dépend de la tâche : element.style est pratique pour de petites modifications ponctuelles ; les classes sont préférables pour gérer les états et les styles complexes ; les variables CSS sont utiles pour les thèmes et les réglages globaux.

Comment peut-on modifier dynamiquement les styles d'un élément sur une page web?