【JavaScript】要素に指定したCSSスタイルを取得する方法

村上 著者:村上

【JavaScript】要素に指定したCSSスタイルを取得する方法

CSSの変更や追加だったら、

// IDがcontentの要素の横幅を100pxに変更
$("#content").css('width', '100px');

上記のような記述が有効ですが、単にCSSの取得だけをしたかったので、方法をまとめ。

なお、今回参考にしたサイトはこちらです。

styleタグのCSSや外部CSSの値を取得 – 三等兵
http://d.hatena.ne.jp/sandai/20100616/p1

 

結果だけ先に載せると、下記のように記述すると、各スタイルが取得できます。

// ID が contentの要素のCSSを取得
var element = document.getElementById('content');
var style = element.currentStyle || document.defaultView.getComputedStyle(element, '');

あとは、取得したいプロパティを指定すれば、そのプロパティの値を取得できるので、if 文の条件式に入れるなりして使用できます。

if(style.display == 'none'){
    // displayプロパティの値が none の時のみ実行する処理
}

 

上で紹介したサイトによると、.style は 要素に対して style 属性で指定したスタイルしか取得できないとのこと。
サンプルはこんな感じ。

<div id="content" style="width:100px"></div>
var element = document.getElementById('content');
console.log(element.style.display);

そのため、上記のコードでは、width は取得できますが、display は取得できないとのこと。
なので、読み取り専用の getComputedStyle() メソッドを使って、スタイルを取得しています。
また、currentStyle はIEの独自規格で、getComputedStyle() が使えないIEで実行したときのための記述です。
もしIEでは絶対に使わないとのことでしたら、currentStyleは省略してもよさそうですね。

 

ということで、JavaScriptでCSSで指定したスタイルを取得する方法でした。
私は、指定した要素の表示・非表示に応じて、とある処理を実行するかどうかを変更したかったので、今回こちらの処理を使いました。
が、普通にCSSの変更だけなら、今回の記事の一番最初に書いた処理でOKなので、あまり使用頻度は高くなさそうですね。

  • この記事いいね! (0)

著者について

村上

村上 administrator