[JavaScript] pxやemなどの単位を除去する

投稿日：2017年7月25日更新日：2018年4月28日

style.widthなどで値を取得すると、"120px"のような単位付きの値が取得されます。
この単位を取るには、parseIntをかますと取り去る事ができます。

サンプルソース

例）style.widthで取得した値の単位を消す

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script>
function test(){
  //オブジェクトを取得
  var obj = document.getElementById("dv1");

  //widthを取得してそのまま出力
  var w1 = obj.style.width;
  console.log(w1);

  //widthを取得してparseIntして出力
  var w2 = parseInt(obj.style.width);
  console.log(w2);
}
</script>
</head>
<body>
  <input type="button" value="btn" onclick="test();">
  <div id="dv1" style="width:120px;height:50px;">abc</div>
</body>
</html>

<!DOCTYPE html>

<head>

function test(){

//オブジェクトを取得

var obj = document.getElementById("dv1");

//widthを取得してそのまま出力

var w1 = obj.style.width;

console.log(w1);

//widthを取得してparseIntして出力

var w2 = parseInt(obj.style.width);

console.log(w2);

}

</script>

</head>

<body>

</body>

</html>

（結果）: 120px 120

解説

px以外のemなどの単位でも対応可能です。

執筆者：とら