HTMLElement.
Un objet pour les styles écrits directement sur l’élément (inline), pour lire et modifier des propriétés CSS individuelles.
- Renvoie
- Un objet
CSSStyleDeclarationavec les styles inline de l’élément.
Exemple
#const bar = document.querySelector('#bar')
bar.style.width = '65%'
bar.style.backgroundColor = 'orange'
console.log(bar.style.width)
console.log(bar.style.backgroundColor)
console.log(bar.style.height)Définition et utilisation
#La propriété style donne accès aux styles enregistrés dans l’attribut style de l’élément. Chaque propriété CSS a ici un équivalent en notation camelCase : background-color devient style.backgroundColor, et font-size devient style.fontSize. Vous définissez les valeurs comme des chaînes, toujours avec une unité, par ex. "200px".
style ne montre que les styles inline. Vous n’y verrez pas les règles des feuilles de style, donc lire style.color pour un élément stylé par une classe renvoie une chaîne vide. Pour lire l’apparence réelle, calculée, utilisez la fonction getComputedStyle(element).
Vous définissez une variable CSS (par ex. --accent) avec la méthode style.setProperty("--accent", "#7c3aed"), et vous retirez un style en lui affectant une chaîne vide ou en appelant removeProperty(). Pour des changements d’apparence plus importants, mieux vaut basculer des classes avec classList, et réserver style aux valeurs calculées à la volée, comme une position ou la largeur d’une barre de progression.
Syntaxe
#element.style.propertyName = value
element.style.setProperty(name, value)
element.style.removeProperty(name)
getComputedStyle(element).propertyNamePlus d’exemples
#const title = document.querySelector('#title')
console.log(title.style.color === '')
console.log(getComputedStyle(title).color)
console.log(getComputedStyle(title).fontSize)const box = document.querySelector('#box')
box.style.setProperty('--accent', '#0ea5e9')
console.log(box.style.getPropertyValue('--accent'))
box.style.width = 120
console.log(box.style.width === '')
box.style.width = '120px'
console.log(box.style.width)L’affectation du simple nombre 120 est ignorée, car en CSS la largeur exige une unité. Seule la chaîne "120px" modifie le style.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Indiquez toujours une unité :
style.width = "120px". Un simple nombre sera ignoré. - Pour lire les styles venant des feuilles de style, utilisez
getComputedStyle(element), carstylene voit que les valeurs inline. - Décrivez les changements d’apparence plus importants en CSS sous forme de classe, et basculez-la avec
classList.
Entrées associées
#- Element.classListUn objet pour ajouter, retirer, basculer et vérifier les classes CSS d’un élément.
- getComputedStyle()Renvoie les styles calculés d’un élément, c’est-à-dire les valeurs CSS que le navigateur a réellement appliquées après avoir pris en compte toutes les règles.
- Element.setAttribute()Définit la valeur d’un attribut HTML d’un élément, ou en ajoute un nouveau.
- document.querySelector()Renvoie le premier élément qui correspond à un sélecteur CSS, ou null si rien ne correspond.
- Template literalsDes templates de texte entre guillemets inversés : ils insèrent des valeurs via ${} et peuvent s’étendre sur plusieurs lignes.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.