[JavaScript] 要素のwidth、heightを取得する

投稿日：2017年6月2日更新日：2018年4月28日

要素のwidth、heightを取得するサンプルです。

サンプルソース

例）ボタンをクリックするとid="dv1"要素のwidth、heightを表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script>
function getWH(){
  var obj = document.getElementById("dv1");
  var w = obj.style.width;
  var h = obj.style.height;
  alert("width:" + w + " height:" + h);
};
</script>
</head>
<body>
  <input type="button" id="btn1" value="ボタン" onclick="getWH();">
  <div id="dv1" style="width:150px;height:80px;"></div>
</body>
</html>

<!DOCTYPE html>

<head>

function getWH(){

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

var w = obj.style.width;

var h = obj.style.height;

alert("width:" + w + " height:" + h);

};

</script>

</head>

<body>

</body>

</html>

（結果）: width:150 height:80

解説

幅は、style.widthで取得できます。
高さは、style.heightで取得できます。
この取得方法は、width、heightを明示的に指定している場合のみ取得できます。
サイズを明示的にしていしていない場合でサイズを取得したい場合は次のページをご覧ください。　→ [JavaScript] 要素のサイズを取得する

執筆者：とら