files/ja/orphaned/web/api/elementcssinlinestyle/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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

---
title: ElementCSSInlineStyle.style
slug: orphaned/Web/API/ElementCSSInlineStyle/style
tags:
  - API
  - CSSOM
  - HTMLElement
  - Property
  - Reference
  - SVGElement
  - Style
translation_of: Web/API/ElementCSSInlineStyle/style
original_slug: Web/API/ElementCSSInlineStyle/style
---
<div>{{APIRef("CSSOM")}}</div>

<p><code><strong>style</strong></code>プロパティは、要素の<em>インライン</em>スタイルと同様に設定したり取得したりするために使用します。取得時は {{domxref("CSSStyleDeclaration")}} オブジェクトで、その要素のインラインの <a href="/ja/docs/Web/HTML/Global_attributes/style"><code>style</code> 属性</a>で定義された属性に割り当てられた値を持つ、その要素のすべてのスタイルプロパティのリストを返します。</p>

<p><code>style</code> 経由でアクセス可能な CSS プロパティのリストについては、<a href="/ja/docs/Web/CSS/CSS_Properties_Reference">CSS プロパティリファレンス</a>を参照してください。<code>style</code> プロパティは CSS カスケードで <code>style</code> 属性によるインラインスタイル宣言と同じ (かつ最高の) 優先順位を持ちます。</p>

<h3 id="Setting_styles" name="Setting_styles">スタイルの設定</h3>

<p>スタイルは <code>style</code> プロパティに (<code>elt.style = "color: blue;"</code> のように) 文字列で直接代入して設定しないでください。これは style 属性が読み取り専用であり、また <code>CSSStyleDeclaration</code> オブジェクトも読み取り専用だからです。代わりに、 <code>style</code>. のプロパティに値を代入してスタイルを設定できます。要素に対して特定のスタイルを他のスタイル値を変えずに追加するため、 <code>style</code> の個々のプロパティを (<code>elt.style.color = '...'</code>のように) 使うことをお勧めします。 <code>elt.style.cssText = '...'</code> や <code>elt.setAttribute('style', '...')</code> では要素のインラインスタイルを、既存のインラインスタイルを上書きすることで設定するからです。なお、 <code>elt.style.&lt;プロパティ&gt;</code> を使ってスタイルを設定する時、プロパティ名はキャメルケースであって、ケバブケースでないので注意してください (つまり <code>elt.style.fontSize</code>となり、 <code>elt.style.font-size</code>ではありません)。</p>

<p>スタイル宣言は <code>null</code> または空文字を設定することでリセットします。例えば <code>elt.style.color = null</code> のようにします。 Internet Explorer は空文字列を設定する必要があり、 <code>null</code> に設定しても何も起こりません。</p>

<h2 id="Examples" name="Examples">例</h2>

<pre class="brush:js notranslate">// Set multiple styles in a single statement
elt.style.cssText = "color: blue; border: 1px solid black";
// Or
elt.setAttribute("style", "color:red; border: 1px solid blue;");

// Set specific style while leaving other inline style values untouched
elt.style.color = "blue";
</pre>

<h3 id="Getting_style_information" name="Getting_style_information">スタイル情報の取得</h3>

<p><code>style</code> プロパティは、要素に適用されているスタイルを完全に知るためには有用ではありません。これは、要素のインラインの <code>style</code> 属性に設定されている CSS 宣言のみを表し、 {{HTMLElement("head")}} セクションのスタイル規則や外部のスタイルシートなど、他の場所のスタイル規則に由来するものを表してはいないからです。要素のすべての CSS プロパティの値を取得するには、代わりに {{domxref("Window.getComputedStyle()")}} を使用する必要があります。</p>

<p>次のコードスニペットは、要素の <code>style</code> プロパティで取得する値と、<code>getComputedStyle()</code> で取得するものの違いを実演します。</p>

<pre class="brush: html notranslate">&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
  &lt;body style="font-weight:bold;"&gt;
    &lt;div style="color:red" id="myElement"&gt;..&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<pre class="brush:js notranslate">var element = document.getElementById("myElement");
var out = "";
var elementStyle = element.style;
var computedStyle = window.getComputedStyle(element, null);

for (prop in elementStyle) {
  if (elementStyle.hasOwnProperty(prop)) {
    out += "  " + prop + " = '" + elementStyle[prop] + "' &gt; '" + computedStyle[prop] + "'\n";
  }
}
console.log(out)
</pre>

<p>出力されるコードは次のようなものです。</p>

<pre class="notranslate">...
fontWeight = '' &gt; 'bold'
color = 'red' &gt; 'rgb(255, 0, 0)'
...</pre>

<p><code>font-weight</code> のスタイルの計算値に <code>bold</code> の値がありますが、要素の <code>style</code> プロパティにはないことに注意してください。</p>

<h2 id="Specification" name="Specification">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSSOM', '#dom-elementcssinlinestyle-style', 'the <code>ElementCSSInlineStyle.style</code> property')}}</td>
   <td>{{Spec2('CSSOM')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

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

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information">動的なスタイル情報の利用</a></li>
</ul>