files/fr/web/api/htmlelement/style/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

---
title: HTMLElement.style
slug: Web/API/HTMLElement/style
tags:
  - DOM
  - Style
translation_of: Web/API/ElementCSSInlineStyle/style
---
<p>{{ APIRef("HTML DOM") }}</p>

<h3 id="R.C3.A9sum.C3.A9" 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>

<h2 id="Exemple" name="Exemple">Exemple</h2>

<pre class="eval">var div = document.getElementById("div1");
div.style.marginTop = ".25cm";
</pre>

<h3 id="Notes" 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/docs/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>

<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>

<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>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>

<p>{{Compat("api.HTMLElement.style")}}</p>

<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification"><span id="1236997045923S" style="display: none;"> </span>Voir aussi</h2>

<ul>
 <li><a class="internal" href="/en/CSS/CSS_Reference" title="en/CSS/CSS_Reference">Liste des propriétés CSS DOM</a> (en)</li>
</ul>

<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Lien Externe</h2>

<ul>
 <li><a class="external" href="http://www.w3schools.com/HTMLDOM/dom_obj_style.asp" title="http://www.w3schools.com/HTMLDOM/dom_obj_style.asp">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>