以前ここで「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()」を使って値を取得した方がよさそうです。

ご参考までに。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでparseInt()を使ってCSSプロパティの値を取得する

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner