From 093cf8ad24d87bdf2812916a745399863dfac50c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 30 Jul 2021 13:00:02 +0900 Subject: ElementCSSInlineStyle を削除 (#1593) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ElementCSSInlineStyle を削除して、その style プロパティを HTMLElement に移管。 --- files/ja/web/api/htmlelement/style/index.html | 95 +++++++++++++++++++++++++++ 1 file changed, 95 insertions(+) create mode 100644 files/ja/web/api/htmlelement/style/index.html (limited to 'files/ja/web/api/htmlelement/style') diff --git a/files/ja/web/api/htmlelement/style/index.html b/files/ja/web/api/htmlelement/style/index.html new file mode 100644 index 0000000000..b2f9bc2ffb --- /dev/null +++ b/files/ja/web/api/htmlelement/style/index.html @@ -0,0 +1,95 @@ +--- +title: HTMLElement.style +slug: Web/API/HTMLElement/style +tags: + - API + - CSSOM + - HTMLElement + - Property + - Reference + - Style +browser-compat: api.HTMLElement.style +translation_of: Web/API/HTMLElement/style +--- +
{{APIRef("CSSOM")}}
+ +

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

+ +
+

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

+
+ +

構文

+ +
style = element.style
+ +

値

+ +

{{domxref("CSSStyleDeclaration")}} で、次のプロパティを持っています。

+ +
+
computed フラグ
+
設定されていません。
+
parent CSS rule
+
Null
+
owner node
+
this
+
+ +

スタイルの設定

+ +

このプロパティは読み取り専用と考えられていますが、 style に直接文字列を代入することで、インラインスタイルを設定することができます。この場合、その文字列は {{domxref("CSSStyleDeclaration.cssText")}} に転送されます。この方法で style を使用すると、その要素のインラインスタイルをすべて完全に上書きします。

+ +

したがって、他のスタイルの値を変更せずに要素の特定のスタイルを追加したい場合は、一般に {{domxref("CSSStyleDeclaration")}} オブジェクトの個別のプロパティを設定したほうがうまく行きます。例えば、 element.style.backgroundColor = "red" のようにします。

+ +

スタイル宣言は null または空文字列を設定することでリセットすることができます。例えば elt.style.color = null のようにします。

+ +

スタイル情報の取得

+ +

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

+ +

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

+ +
<!DOCTYPE HTML>
+<html>
+  <body style="font-weight:bold;">
+    <div style="color:red" id="myElement">..</div>
+  </body>
+</html>
+
+ +
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] + "' > '" + computedStyle[prop] + "'\n";
+  }
+}
+console.log(out)
+
+ +

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

+ +
...
+fontWeight = '' > 'bold'
+color = 'red' > 'rgb(255, 0, 0)'
+...
+ +

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

+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf