jquery parseIntメソッド

TOPページに戻る > jquery入門

jquery parseInt()メソッド

parseIntメソッドは、文字列が入っていた場合に、数値のみに変更できます
parseIntメソッドは、pxなどの文字がまじったcssのプロパティの値に数値をプラスするときなどに役立ちます
jqueryで足し算などするときは文字列が混じると計算できなくなります。parseIntメソッドを使って、cssのプロパティの値に混じっている文字列を削除してあげると計算ができるようになります

parseInt()

実際の使い方。例

parseInt($("セレクタ").css("cssプロパティ"));

指定したHTML要素のcssのwidthプロパティの値に200ずつプラスしていきます

指定した要素をクリックしたときに、クリックした要素に適用されているcssのwidthプロパティの値を取得して、parseIntメソッドを使って取得した値の300pxからpxを削除します。300+200=500をhoge変数に入れます(hogeは適当につけた名前です)。animateメソッドを使って、widthプロパティの値をhoge変数（200ずつプラスされた値）に変更します。最後はtextメソッドでhogeの変数の中身を表示します

jquery

$(function() {
	$("p#foo").click(function(){
	var hoge = parseInt($(this).css("width"))+200+"px";
	$(this).animate({width:hoge});
	$(this).text("widthの値は"+ hoge);
	});
});

css

p#foo{
 cursor: pointer;
 background-color: #F90;
 width: 300px ;
 }

html

<p id="foo">p要素　widthの値は300px</p>

サンプル

p要素　widthの値は300px