HTMLElement.style

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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() :

html
<!doctype html>
<html>
  <body style="font-weight:bold;">
    <div style="color:red" id="monElement">..</div>
  </body>
</html>
js
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

Voir aussi