例
計算された取得(actual showing)のdivの背景色を：
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed background color for the test div is: <span
id="demo"></span></p>
<script>
function myFunction() {
var elem = document.getElementById("test");
var
theCSSprop = window.getComputedStyle(elem,
null).getPropertyValue("background-color");
document.getElementById("demo").innerHTML = theCSSprop;
}
</script>結果は次のようになります。
The computed background color for the test div is: rgb(173, 216, 230) »それを自分で試してみてください もっと"Try it Yourself"以下の例。
定義と使用法
getComputedStyle()メソッドは、すべての実際の取得(computed)指定された要素のCSSプロパティと値を。
計算されたスタイルは、複数のソースからのスタイリングがaplliedしてきた後acutally、要素の表示に使用するスタイルです。
スタイルソースは含めることができます：内部スタイルシート、外部スタイルシートを、スタイルやブラウザの既定のスタイルを継承しました。
getComputedStyle()メソッドを返しCSSStyleDeclarationオブジェクトを 。
ブラウザのサポート
表中の数字は完全に方法をサポートする最初のブラウザのバージョンを指定します。
| 方法 | |||||
|---|---|---|---|---|---|
| getComputedStyle() | 11.0 | 9.0 | 4.0 | 5 | 11.5 |
構文
パラメータ値 パラメーター 説明 element 必須。 以下のための計算されたスタイルを取得するための要素 pseudoElement 任意。 擬似要素を取得します
技術的な詳細
戻り値： 要素のCSS宣言ブロックを含むCSSStyleDeclarationオブジェクト。
その他の例
例
要素からすべての計算されたスタイルを取得します。
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed styles for the test div are: <br><span
id="demo"></span></p>
<script>
function myFunction(){
var elem = document.getElementById("test");
var txt;
cssObj = window.getComputedStyle(elem, null)
for
(i = 0; i < cssObj.length; i++) {
cssObjProp = cssObj.item(i)
txt += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script> »それを自分で試してみてください 例
（擬似要素を使って）テストdiv要素の最初の文字のフォントサイズを取得します。
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed font size for div::first-letter in the test div
is: <span id="demo"></span></p>
<script>
function myFunction(){
var elem = document.getElementById("test");
var
theCSSprop = window.getComputedStyle(elem,
"first-letter").getPropertyValue("font-size");
document.getElementById("demo").innerHTML = theCSSprop;
}
</script> »それを自分で試してみてください