以前ここで「jQueryでCSSプロパティの値を取得する方法」と題して
jQueryでCSSプロパティの値を取得する方法を紹介しましたが、
「parseInt()」を使って同様にCSSプロパティ値を取得する方法も
結構必要になったりすることがあるので、メモ書きとして紹介してみます。
前回のサンプルと同じ内容でのサンプルで動作させてみると。。。
jQueryでparseInt()を使ってCSSプロパティの値を取得
＜div id=”box”＞とID名が付けられたボックス要素に
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 = parseInt($('#box').css('width'));
var boxHeight = parseInt($('#box').css('height'));
alert(boxWidth);
alert(boxHeight);
});
</script>
変数に入れたCSSプロパティ値の取得の方法が違いますが、
前回の
◆SCRIPT
var boxWidth = $('#box').css('width');
var boxHeight = $('#box').css('height');
「.css」の取り方だと、
結果の値は、
——————————-
width → 300px
height → 100px
——————————-
と「px」など値が付いた形で取得されます。
それに変わって今回の
◆SCRIPT
var boxWidth = parseInt($('#box').css('width'));
var boxHeight = parseInt($('#box').css('height'));
「parseInt()」を使った取得方法だと
結果の値は、
——————————-
width → 300
height → 100
——————————-
となり、数値だけの取得になります。
この数値だけの取得方法だと、
ifなどでの条件分岐の際、
「＜」「＞」といった不等号での値の比較が可能になります。
（「.css」での取得では正常に比較できないことがあります。）
CSSプロパティを利用して細かな条件分岐が必要な際には、
「parseInt()」を使って値を取得した方がよさそうです。
ご参考までに。。。