ywork2020.com

Title

CSSのプロパティ値を取得する

目次 (INDEX)

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: innerText

目次に戻る

getPropertyValueを使用する上での要点

  1. getPropertyValueはwindow変数.getComputedStyle()メソッドから実行できる
  2. getComputedStyle(引数)の引数はHTMLElement型である
  3. getPropertyValue(引数)の引数は文字型である

目次に戻る