HTMLElement.style
La propriété en lecture seule style
renvoie le style en incise d'un élément sous la forme d'un objet CSSStyleDeclaration
contenant une liste de l'ensemble des propriétés de style pour cet élément dont les valeurs sont celles des attributs défini par l'attribut HTML style
.
Note : Voir la référence des propriétés CSS pour une liste des propriétés CSS accessibles style
. La propriété style
possède la même priorité (la plus haute) dans la cascade que les déclarations de mise en forme effectuées en incise avec l'attribut style
.
Valeur
Un objet CSSStyleDeclaration
avec les propriétés suivantes :
- marqueur calculé
-
Non placé.
- Règle CSS parente
-
Nulle.
- Nœud propriétaire
-
this
Définir les styles
Bien que cette propriété soit en lecture seule, il est possible de définir une mise en forme en affectant directement une chaîne de caractères à la propriété style
. Dans ce cas, la chaîne de caractères est transmie à CSSStyleDeclaration.cssText
. Utiliser style
de cette manière écrasera toute mise en forme déclarée en incise sur l'élément.
Aussi, pour ajouter des règles de mise en forme à un élément sans modifier les autres valeurs, mieux vaudra définir les propriétés individuelles sur l'objet CSSStyleDeclaration
. Par exemple en utilisant element.style.backgroundColor = "red"
.
Une déclaration de style est réinitialisée lorsqu'on lui affecte null
ou la chaîne vide (par exemple elt.style.color = null
).
Obtenir les informations de style
La propriété style
n'est pas utile pour tout savoir des styles appliqués à l'élément, car elle ne représente que les déclarations CSS appliquées à l'élément via l'attribut HTML style
et pas celles provenant d'autres sources (comme <head>
ou surtout les feuilles de styles externes). Pour obtenir l'ensemble des propriétés CSS d'un élément, il faudra plutôt utiliser Window.getComputedStyle()
.
Le fragment de code qui suit illustre la différence entre les valeurs obtenues avec la propriété style
et celles obtenues avec la méthode getComputedStyle()
:
<!doctype html>
<html>
<body style="font-weight:bold;">
<div style="color:red" id="monElement">..</div>
</body>
</html>
let element = document.getElementById("monElement");
let out = "";
let elementStyle = element.style;
let computedStyle = window.getComputedStyle(element, null);
for (prop in elementStyle) {
if (elementStyle.hasOwnProperty(prop)) {
out +=
" " +
prop +
" = '" +
elementStyle[prop] +
"' > '" +
computedStyle[prop] +
"'\n";
}
}
console.log(out);
Le résultat devrait ressembler à :
... fontWeight = '' > 'bold' color = 'red' > 'rgb(255, 0, 0)' ...
On notera la présence de la valeur bold
pour font-weight
dans le style calculé et son absence dans la propriété style
de l'élément.
Spécifications
Specification |
---|
CSS Object Model (CSSOM) # dom-elementcssinlinestyle-style |
Compatibilité des navigateurs
BCD tables only load in the browser