DOM
：：Window.getComputedStyle() メソッド
編集：2022.09.12 by T.A.
[Edge]。→、
Window の指定要素の、文書に組み込んであるCSSを解釈したスタイルシートを取得します。
mdn： アクティブなスタイルシートを適用し、それらの値に含まれる可能性のある基本的な計算を解決した後、要素のすべての CSS プロパティの値を含むオブジェクトを返します。
個々の CSS プロパティの値は、オブジェクトによって提供される API を介してアクセスするか、CSS プロパティ名でインデックスを作成することでアクセスすることができます。
構文
Window.getComputedStyle(element[, pseudoElt])
| Window
| Window。
|
|---|
| element
| この Element の計算したスタイルを取得します。¶
|
|---|
| pseudoElt
| 省略可。一致させる擬似要素を指定する文字列。実在する要素の場合は省略（または null）。
|
|---|
戻り値
生きた CSSStyleDeclaration オブジェクトで、要素のスタイルが変わると自動で更新されます。
例外
- TypeError
- 渡されたオブジェクトが Element ではないか、pseudoElt が有効な擬似要素セレクターではないか、::part() または ::slotted() である場合。
Note： 有効な擬似要素とは構文的に適切であることを指します。例えば ::unsupported は擬似要素として対応されていませんが、有効と判断されます。さらに、最新の W3 標準では ::before と ::after のみを明示的に対応していますが、CSS の WG 草案はこの値を制限していません。ブラウザーの互換性は様々かもしれません。
例
この例では、<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：
const para = document.querySelector('p');
const compStyles = window.getComputedStyle(para);
para.textContent = `My computed font-size is ${compStyles.getPropertyValue('font-size')},\n` +
`and my computed line-height is ${compStyles.getPropertyValue('line-height')}.`;
表示結果：
どうやら、P 要素の取得で、組み込まれているCSSを加味したスタイルが得られるようです。
以下のCSSが組み込んであります：
HTML：
<SPAN id=IdSpan class=Test style="font-size:30px">SPAN要素</SPAN>
JavaScript：
Sty=window.getComputedStyle(IdSpan);
D=Sty.color; //＝[string]：rgb(255, 0, 0)
D=Sty.fontSize; //＝[string]：30px
D=Sty.lineHeight; //＝[string]：36px
テスト
.jpg)