jQueryでCSSのプロパティの値を操作する方法は基礎的なことで簡単なのですが
すでに各要素に指定（設定）されているCSSプロパティ値を取得する方法が
必要な際に使い方を忘れがちなのでメモ書き。
例えば＜div id=”box”＞とID名が付けられた
ボックス要素の幅「width」を取得する場合。
jQueryでCSSプロパティの値を取得
$(function(){
$('#box').css('width');
});
単純な記述ですが、「.css」の後ろに属性を記載するのみです。
このままでの記述では何も意味を持たないので
この＜div id=”box”＞にCSSで幅「width」と高さ「height」を指定して
変数「boxWidth」「boxHeight」にそれぞれ値を入れた後、
アラートで値を表示する場合。
◆HTML <div id="box"></div><!--/#box-->
◆CSS
#box {
width: 300px;
height: 100px;
}
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var boxWidth = $('#box').css('width');
var boxHeight = $('#box').css('height');
alert(boxWidth);
alert(boxHeight);
});
</script>
この様な使い方をすることで、
jQueryで各要素のCSSプロパティ値を取得することができ、
いろいろ利用することで何かと便利に使えたりします。
ご参考までに。。。