YoheiM技術やらずに終われまテン

2011-07-31 [JavaScript] heightやwidthの値修正に便利なparseInt関数

こんにちは、@yoheiMuneです。

今日はライトなネタを。JavaScript関数でparseInt関数があるかと思います。文字列などを数値に変換してくれる関数です。その便利な使い方Tipsブログに残しておきたいと思います。

f:id:yoheiM:20110801005007j:image




widthやheightの値変更にparseIntが役立つ

DIVなどのHTMLのエレメントの高さや横幅などをJavaScriptで取得すると、以下のような値が取れるかと思います。

<div id="div1" style="width:100px; height:100px;">
<script type="text/javascript">
  var div1 = document.querySelector("#div1");
  var width = div1.style.width; // 「100px」という文字列
  div1.style.width = width + 100; //「100px100」という文字列。残念な形。
</script>

そして取得した100pxから200pxに変えたいときに、"px"という文字が邪魔に。

そんなときにparseIntを使うと便利。以下のように使えます。

<div id="div1" style="width:100px; height:100px;">
<script type="text/javascript">
  var div1 = document.querySelector("#div1");
  var width = parseInt(div1.style.width); // 「100」という数値
  div1.style.width = (width + 100) + "px";
</script>

自動的にpxという文字列を削除して、必要な100という数値を取得することが出来ます。

そのため、DIV1の横幅を200pxにしたい場合にも、数値を足す事で簡単に横幅を変えることが可能です。

ちょっとしたTipsです♪(´ε` )



最後に

JavaScriptは簡単に記述出来る言語ですが、ちょとした書き方や便利関数を知っていると、より楽に速く開発が出来そうですね(((o(*゚▽゚*)o)))

今後も便利なものに出会えたら良いなぁ。



運営しているサイトです。どうぞよろしくお願いします(*´∇`*)

Facebook

HTML5LearnersHTML5を学び合うFacebookPage

HTML5サンプルページ:作成したサンプルを載せているサイト

YoheiM.NET:技術情報を中心に情報発信サイト

cooking_bot:料理情報をつぶやくTwitterアカウント