SYNCERのロゴ
アイキャッチ画像

要素に適用されているCSSの値を取得する方法

JavaScriptで要素に適用されているスタイルシートの値を取得するには、getComputedStyle()を利用しましょう。

サンプルコード

要素に指定されているcolorプロパティの値を取得する例です。getComputedStyle()は、全スタイルシートを解析後の計算値を取得するためのメソッドです。CSSで直接指定していないプロパティでも、継承値や初期値など、要素に適用されているプロパティの値を取得できます。値は解析後のものなので、例えば、CSSでredを指定しても、取得できる値はRGB値(rgb(255,0,0))だったりします。

div {
	color: red ;
}
var cssStyleDeclaration = getComputedStyle( element, null ) ;

var a = cssStyleDeclaration.getPropertyValue( "color" ) ;

デモ

要素に適用されている様々なプロパティの値を取得してみて下さい。

/*
div {
	color: red ;
	border: 1px solid #888 ;
	background-color: #fffff0 ;
}
*/

// <div id="target"> ... </div>
var element = document.getElementById( "target" ) ;

var cssStyleDeclaration = getComputedStyle( element, null ) ;

var a = cssStyleDeclaration.getPropertyValue( "color" ) ;
この要素のCSSを取得

a = red

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年8月1日 (火)
コンテンツを公開しました。