JavaScriptでdivなどの要素のサイズを取得する方法です。
.styleで取得する方法と、.getBoundingClientRect()で取得する方法の2種類があります。
サンプルソース
一番シンプルな方法は、CSSの設定値を取得する.styleを使う方法です。
例)幅を「.style.width」で取得する
1 |
<div id="d1" style="width:150px;">hoge</div> |
1 2 3 4 |
var obj = document.getElementById("d1"); var w = obj.style.width; console.log(w); →150px |
しかし、この方法だとスタイルに明示的にwidthやheightが設定されていない場合はサイズを取得できません。
例)スタイルにサイズが設定されていない状態で「.style.width」でサイズを取得する
1 |
<div id="d1">hoge</div> |
1 2 3 4 |
var obj = document.getElementById("d1"); var w = obj.style.width; console.log(w); →"" |
スタイルでサイズが設定されていなくてもサイズを取得したい場合は、
.getBoundingClientRect()を使用します。
例)スタイルにサイズが設定されていない状態で「.getBoundingClientRect().width」でサイズを取得する
1 |
<div id="d1">hoge</div> |
1 2 3 4 |
var obj = document.getElementById("d1"); var w = obj.getBoundingClientRect().width; console.log(w); →150 |
取得できました(*^_^*)
解説
- スタイルに設定されているwidthやheightを取得する場合は、.styleで取得する。
- 現状のwidthやheightを取得するには、.getBoundingClientRect()で取得する。
- .getBoundingClientRect()で取得した場合の単位はpxです。
- .styleでサイズを取得するとpxなどの単位も同時に取得されますが、これを除去したい場合は次のページをご覧ください。→ pxやemなどの単位を除去する