element.style

  • Raccourci de la révision : DOM/element.style
  • Titre de la révision : element.style
  • ID de la révision : 62242
  • Créé :
  • Créateur : Julien.stuby
  • Version actuelle ? Non
  • Commentaire 23 words added; page display name changed to 'element.style'

Contenu de la révision

{{ DomRef() }}

Résumé

Renvoie un objet représentant l'attribut style de l'élément.

Exemple

var div = document.getElementById("div1");
div.style.marginTop = ".25cm";

Notes

Étant donné que la propriété style d'un élément représente sa déclaration de style en-ligne, qui se trouve dans son attribut style et qui a la priorité la plus haute dans la cascade CSS, elle est utile pour définir un style pour un élément particulier.

Cependant, elle n'est pas utile pour connaître le style de l'élément en général, puisqu'elle ne représente que les déclarations CSS définies dans l'attribut style de l'élément, et pas celles qui viennent d'autres règles de style, comme celles qui peuvent se trouver dans la section <head> ou des feuilles de style externes.

Pour obtenir les valeurs de toutes les propriétés CSS pour un élément, vous devriez plutôt utiliser window.getComputedStyle.

Consultez la liste des propriétés CSS DOM pour une liste des propriétés CSS accessibles depuis le DOM. Vous y trouverez quelques notes supplémentaires concernant l'utilisation de la propriété style pour styler des éléments dans le DOM.

Il est généralement préférable d'utiliser la propriété style plutôt que elt.setAttribute('style', '...') depuis un script, étant donné que l'utilisation de la propriété style n'écrasera pas les autres propriétés CSS qui peuvent avoir été spécifiées dans l'attribut style.

Spécification

Voir aussi

Lien Externe

{{ languages( { "en": "en/DOM/element.style", "ja": "ja/DOM/element.style", "pl": "pl/DOM/element.style" } ) }}

Source de la révision

<p>{{ DomRef() }}</p>
<h3 name="R.C3.A9sum.C3.A9">Résumé</h3>
<p>Renvoie un objet représentant l'attribut <code>style</code> de l'élément.</p>
<h3 name="Exemple">Exemple</h3>
<pre class="eval">var div = document.getElementById("div1");
div.style.marginTop = ".25cm";
</pre>
<h3 name="Notes">Notes</h3>
<p>Étant donné que la propriété <code>style</code> d'un élément représente sa déclaration de style en-ligne, qui se trouve dans son attribut <code>style</code> et qui a la priorité la plus haute dans la cascade CSS, elle est utile pour définir un style pour un élément particulier.</p>
<p>Cependant, elle n'est pas utile pour connaître le style de l'élément en général, puisqu'elle ne représente que les déclarations CSS définies dans l'attribut <code>style</code> de l'élément, et pas celles qui viennent d'autres règles de style, comme celles qui peuvent se trouver dans la section <code>&lt;head&gt;</code> ou des feuilles de style externes.</p>
<p>Pour obtenir les valeurs de toutes les propriétés CSS pour un élément, vous devriez plutôt utiliser <code><a href="/fr/DOM/window.getComputedStyle" title="fr/DOM/window.getComputedStyle">window.getComputedStyle</a></code>.</p>
<p>Consultez la <a href="/fr/DOM/CSS" title="fr/DOM/CSS">liste des propriétés CSS DOM</a> pour une liste des propriétés CSS accessibles depuis le DOM. Vous y trouverez quelques notes supplémentaires concernant l'utilisation de la propriété <code>style</code> pour styler des éléments dans le DOM.</p>
<p>Il est généralement préférable d'utiliser la propriété <code>style</code> plutôt que <code>elt.setAttribute('style', '...')</code> depuis un script, étant donné que l'utilisation de la propriété <code>style</code> n'écrasera pas les autres propriétés CSS qui peuvent avoir été spécifiées dans l'attribut <code>style</code>.</p>
<h3 name="Sp.C3.A9cification">Spécification</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule-style">DOM Level 2 Core : style</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/style/css.html#CSS-CSSStyleRule-style">traduction en français</a> (non normative)</small></li>
</ul>
<h3 name="Sp.C3.A9cification"><span id="1236997045923S" style="display: none;"> </span>Voir aussi</h3>
<ul> <li><a href="/fr/DOM/CSS" title="fr/DOM/CSS">Liste des propriétés CSS DOM</a> (en)</li>
</ul>
<h3 name="Sp.C3.A9cification">Lien Externe</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule-style">HTML DOM Style Object</a> — W3Schools.com (en)</li>
</ul>
<p>{{ languages( { "en": "en/DOM/element.style", "ja": "ja/DOM/element.style", "pl": "pl/DOM/element.style" } ) }}</p>
Revenir à cette révision