windowとは
- ここで説明するwindow とは次の語句からなるjavascriptのグローバル変数であり、Windowオブジェクトを参照します。
- window
- 読み: ウィンドウ
意味: 窓
getComputedStyleとは
- ここで説明するgetComputedStyle とは次の語句からなるjavascriptのメソッドです。
- get
- 読み: ゲット
意味: 得る、獲得する - compute
- 読み: コンピュート
意味: コンピューターで計算する - style
- 読み: スタイル
意味: 姿、格好、形式、様式
getPropertyValueとは
- ここで説明するgetPropertyValue とは次の語句からなるjavascriptのメソッドです。
- get
- 読み: ゲット
意味: 得る、獲得する - property
- 読み: プロパティ
意味: 財産、資産、所有物 - value
- 読み: バリュー
意味: 値、価値
getPropertyValueメソッドの概要
このメソッドは要素の既定値もしくはCSSStyleで宣言したスタイルのプロパティ値を取得することができます。
つまり、要素に予め設定されているスタイル値やCSSやstyle要素で設定したスタイル値を取得できるということです。
このメソッドは、WindowオブジェクトのgetComputedStyleメソッドから実行できるメソッドであり、window変数から参照します。
構文
サンプルを見る前に構文を確認しておきます。
window.getComputedStyle(element).getPropertyValue(property);
サンプルコードと実行結果
サンプルに使用しているのは div要素 です。 この要素にCSSの width プロパティで300pxを指定しています。
ここでは上記で説明したdiv要素の横幅をgetPropertyValueメソッドを使って取得してみます。
サンプルコード: CSS
<style>
#idDiv{
width: 300px;
border: thin solid currentColor;
}
</style>
- 03: 横幅 (300px)
- 04: 境界線 (細線 実線 既定色)
サンプルコード: HTML
<body>
<div id="idDiv">
サンプル: div要素<br>
width: <output id="idWidth">innerText</output>
</div>
</body>
- 02: div要素 (この要素の横幅を求めます)
- 04: output要素 (ここに結果を表示します)
サンプルコード: script
<script>
let elmDiv = document.getElementById("idDiv");
let elmOut = document.getElementById("idOut");
elmOut.innerText = window.getComputedStyle(elmDiv).getPropertyValue("width");
</script>
- 02: elmDiv変数 (識別子:idDivからHTMLElementを取得します)
- 03: elmOut変数 (識別子:idOutからHTMLElementを取得します)
- 04: getPropertyValue("width")でCSSのwidthプロパティの値を取得して表示します
サンプル: div要素
width:
width:
getPropertyValueを使用する上での要点
- getPropertyValueはwindow変数.getComputedStyle()メソッドから実行できる
- getComputedStyle(引数)の引数はHTMLElement型である
- getPropertyValue(引数)の引数は文字型である