[JavaScript] 要素のサイズを取得する

投稿日：2017年8月13日更新日：2018年4月28日

JavaScriptでdivなどの要素のサイズを取得する方法です。

.styleで取得する方法と、.getBoundingClientRect()で取得する方法の２種類があります。

サンプルソース

一番シンプルな方法は、CSSの設定値を取得する.styleを使う方法です。

<div id="d1" style="width:150px;">hoge</div>

1	<div id="d1" style="width:150px;">hoge</div>

var obj = document.getElementById("d1");
var w = obj.style.width;
console.log(w);
→150px

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

var w = obj.style.width;

console.log(w);

→150px

しかし、この方法だとスタイルに明示的にwidthやheightが設定されていない場合はサイズを取得できません。

<div id="d1">hoge</div>

1	<div id="d1">hoge</div>

var obj = document.getElementById("d1");
var w = obj.style.width;
console.log(w);
→""

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

var w = obj.style.width;

console.log(w);

→""

スタイルでサイズが設定されていなくてもサイズを取得したい場合は、
.getBoundingClientRect()を使用します。

<div id="d1">hoge</div>

1	<div id="d1">hoge</div>

var obj = document.getElementById("d1");
var w = obj.getBoundingClientRect().width;
console.log(w);
→150

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

var w = obj.getBoundingClientRect().width;

console.log(w);

→150

取得できました(*^_^*)

執筆者：とら