From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../ja/web/api/window/getcomputedstyle/index.html | 157 +++++++++++++++++++++ 1 file changed, 157 insertions(+) create mode 100644 files/ja/web/api/window/getcomputedstyle/index.html (limited to 'files/ja/web/api/window/getcomputedstyle') diff --git a/files/ja/web/api/window/getcomputedstyle/index.html b/files/ja/web/api/window/getcomputedstyle/index.html new file mode 100644 index 0000000000..6330951eff --- /dev/null +++ b/files/ja/web/api/window/getcomputedstyle/index.html @@ -0,0 +1,157 @@ +--- +title: Window.getComputedStyle() +slug: Web/API/Window/getComputedStyle +tags: + - API + - CSSOM View + - Method + - Reference + - Window + - getComputedStyle +translation_of: Web/API/Window/getComputedStyle +--- +

{{APIRef("CSSOM")}}

+ +

Window.getComputedStyle() メソッドは、アクティブなスタイルシートを適用し、それらの値に含まれる可能性のある基本的な計算を解決した後、要素のすべての CSS プロパティの値を含むオブジェクトを返します。個々の CSS プロパティの値は、オブジェクトによって提供される API を介してアクセスするか、CSS プロパティ名でインデックスを作成することでアクセスすることができます。

+ +

構文

+ +
var style = window.getComputedStyle(element [, pseudoElt]);
+ +
+
element
+
この {{DOMxRef("Element")}} の計算したスタイルを取得します。
+
pseudoElt{{Optional_Inline}}
+
一致させる擬似要素を指定する文字列。実在する要素の場合は省略 (または null)。
+
+ +

返値の style は、生きた {{DOMxRef("CSSStyleDeclaration")}} オブジェクトで、要素のスタイルが変わると自動で更新されます。

+ +

例外

+ +
+
{{JSxRef("TypeError")}}
+
渡されたオブジェクトが {{DOMxRef("Element")}} ではないか、 pseudoElt が妥当な擬似要素セレクターではないか、 {{CSSxRef("::part", "::part()")}} または {{CSSxRef("::slotted", "::slotted()")}} である場合。
+
+
+

注: 妥当な擬似要素とは構文的に適切であることを指します。例えば ::unsupported は擬似要素として対応はありませんが、妥当と判断されます。

+
+
+
+ +

例

+ +

この例では、 {{HTMLElement("p")}} の要素のスタイルを設定してから、getComputedStyle() を使用してそれらのスタイルを取得し、それらを <p> のテキストコンテンツに出力します。

+ +

HTML

+ +
<p>Hello</p>
+ +

CSS

+ +
p {
+  width: 400px;
+  margin: 0 auto;
+  padding: 20px;
+  font: 2rem/2 sans-serif;
+  text-align: center;
+  background: purple;
+  color: white;
+}
+ +

JavaScript

+ +
let para = document.querySelector('p');
+let compStyles = window.getComputedStyle(para);
+para.textContent = 'My computed font-size is ' +
+    compStyles.getPropertyValue('font-size') +
+    ',\nand my computed line-height is ' +
+    compStyles.getPropertyValue('line-height') +
+    '.';
+ +

結果

+ +

{{EmbedLiveSample('Examples', '100%', '240px')}}

+ +

解説

+ +

返されるオブジェクトは {{DOMxRef("CSSStyleDeclaration")}} 型で、これは要素の {{DOMxRef("HTMLElement.style", "style")}} プロパティから返されるオブジェクトと同じです。しかし、2つのオブジェクトは異なる目的を持っています。

+ + + +

最初の引数は {{domxref("Element")}} でなければなりません。要素以外、例えば {{DOMxRef("Text")}} ノードであった場合はエラーが発生します。

+ +

defaultView

+ +

多くのコードサンプルでは、 getComputedStyle は {{DOMxRef("document.defaultView")}} オブジェクトから使用されています。ほとんどの場合、 getComputedStyle は window オブジェクト上に存在するので、これは必要ありません。 defaultView パターンは、 window のテスト仕様を書きたくない人たちと、 Java でも使える API を作りたくない人たちの組み合わせだったのかもしれません。

+ +

擬似要素の使用

+ +

getComputedStyle は擬似要素 (例えば ::after, ::before, ::marker, ::line-marker — the pseudo-element spec を参照してください) からスタイル情報を取得することができます。

+ +
<style>
+  h3::after {
+    content: ' rocks!';
+  }
+</style>
+
+<h3>Generated content</h3>
+
+<script>
+  var h3 = document.querySelector('h3');
+  var result = getComputedStyle(h3, ':after').content;
+
+  console.log('the generated content is: ', result); // returns ' rocks!'
+</script>
+
+ +

注

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSSOM", "#dom-window-getcomputedstyle", "getComputedStyle()")}}{{Spec2("CSSOM")}}
{{SpecName("DOM2 Style", "#CSS-CSSview-getComputedStyle", "getComputedStyle()")}}{{Spec2("DOM2 Style")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Window.getComputedStyle")}}

+ +

関連情報

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