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


```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 with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Utiliser les informations de mise en forme dynamiques (en-US)