JavaScript

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

投稿日:2017年8月13日 更新日:

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

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

サンプルソース

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

例)幅を「.style.width」で取得する


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

例)スタイルにサイズが設定されていない状態で「.style.width」でサイズを取得する


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

例)スタイルにサイズが設定されていない状態で「.getBoundingClientRect().width」でサイズを取得する

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

解説

  • スタイルに設定されているwidthやheightを取得する場合は、.styleで取得する。
  • 現状のwidthやheightを取得するには、.getBoundingClientRect()で取得する。
  • .getBoundingClientRect()で取得した場合の単位はpxです。
  • .styleでサイズを取得するとpxなどの単位も同時に取得されますが、これを除去したい場合は次のページをご覧ください。→ pxやemなどの単位を除去する

スポンサーリンク

スポンサーリンク

-JavaScript
-

執筆者:



comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

スポンサーリンク