heightやwidthの値修正に便利なparseInt関数

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

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
HTML5Learners：HTML5を学び合うFacebookPage
HTML5サンプルページ：作成したサンプルを載せているサイト
YoheiM.NET：技術情報を中心に情報発信サイト
cooking_bot：料理情報をつぶやくTwitterアカウント