83. Styler des éléments avec JavaScript

Nous pouvons manipuler directement les styles CSS d'un élément en utilisant la propriété .style.

Syntaxe (camelCase)

Les propriétés CSS (qui utilisent des traits d'union, ex : background-color) doivent être converties en camelCase lorsqu'elles sont accédées via la propriété JavaScript .style (ex : backgroundColor).

javascript const box = document.querySelector('.box');

// Définir des styles en ligne (inline) box.style.backgroundColor = 'teal'; box.style.width = '200px'; box.style.border = '2px solid black'; bis.style.fontSize = '1.2em'; // Notez le camelCase pour font-size

Lire les styles

Vous pouvez également lire le style en ligne actuellement défini :

javascript console.log(box.style.width); // 200px

Bonne pratique : Évitez de surutiliser .style. Définir les styles directement en JavaScript mène souvent à un code brouillon et difficile à maintenir. Il est fortement recommandé d'utiliser des classes CSS (Leçon 84) pour gérer les styles et d'utiliser JavaScript uniquement pour activer ou désactiver ces classes.