以前にJavaScriptとjQueryを使ってWebページのwindowsの幅や高さ、documentの幅や高さを取得する方法をまとめました。
今回はそれの要素版です。
ページ内にdivで作った要素の幅と高さを、いろいろな方法で取得してみます。
確認用のページと結果
今回もまた確認用スクリプトを作りました。
以下です。
JaveScript&jQuery Box Width/Height
ページ内の「Get Width/Height」ボタンを押すと、ボタン上部にあるボックス要素の幅と高さのピクセル数を取得して表示します。
私自身はMac/WinのChrome、Edge、Firefox、Opera、Safariで実験をしましたが、その結果の対応環境をアイコンで表示しています。その結果、documentと同様に対応環境はどれも同じでした。
あとiOS/AndroidのChrome、Firefox、Opera、SafariとAndroid標準ブラウザでも全く同じでした。古いIEだと違うかもしれませんが、最近のブラウザなら基本的にどれも同じように対応していると考えて良さそうです。
値については、jQueryのwidth/heightは要素そのもののピクセル数、innerWidth/Heightはpaddingを含めたもの、outerWidth/Heightはborderまで含めたものとなりました。
またJavaScriptの場合ですが、まずgetElementByIdで要素を取得し、4つの方法で取得してみましたが、clientWidth/Heightのみ取得できます。これはjQueryのinnerWidth/Heightと同じ値になりました。
あと、styleを取得するという方法も使ってみましたが、getComputedStyle()を使わないと取得できませんでした。
基本的にはjQueryで良さそう
window/documentの時と同様に、jQueryを使えるならそれが一番シンプルなコードになりそうです。
もしjQueryを使えない場合、paddingを含めた値を取得するのは簡単にできそうです。
が、もし要素そのもののサイズを取得したい場合には少し複雑になります。
今回の結果を踏まえるならgetComputedStyle()を使い、取得した文字列から「px」を削除する、という処理が必要になりそうです。
これについては、別な方法もあるかもしれませんが、未確認です。
あと「element.style.width」については、どの環境も対応はしていますが、ここでは取得できませんでした。
原因、というか理由は、「element.style.width」で取得できるのはタグに直接指定されたstyleだからです。
「<div style=”width:150px;height:150px;”>」と記述すると取得できる、ということです。
他のライブラリも見てみたいですね
以前に書いたwindow/documentと同様の結論でした。
基本的にはjQueryを使うのが良さそうです。
ただ最近は（以前からかもしれませんが）、jQueryではなく別なライブラリも存在しています。
jQueryと同じような記法で書けるけど、特定の機能に特化させることで動作を軽くしたものなどもあります。
そういったものも使ってみたいですね。
