要素に適用されている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
関連記事
- スクロールイベントの頻度を減らす方法
- スクロールイベントの頻度を減らすには、setTimeout()で発火するタイミングを調節します。
- 静的なクリックを検出する方法
- 静的なクリック(static click)を検出するには、onmousedown、onmousemove、onmouseupのイベントを組み合わせましょう。
- スクロール量を取得する方法
- スクロール量を取得するには、window.pageYOffsetを参照しましょう。
- スクロール中か否かを判定する方法
- ユーザーがスクロール中か否かを判定するには、scrollイベントとsetTimeout()を利用します。
- クリックした位置を取得する方法
- マウスでクリックした位置を取得するには、eventオブジェクトのpageX、pageYを参照します。
- マウスデバイスとタッチデバイスを判別する方法
- ユーザーがマウスデバイスなのか、タッチデバイスなのかを判定します。