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なので、あまり使用頻度は高くなさそうですね。
