[jQuery]要素の大きさを取得する

Javascript を使って要素の大きさを取得する場合、要素に設定されているpadding, border などのスタイルの幅を考慮する必要がよくあります。
下のスタイルを適用された、div要素について、JavaScript と jQueryで高さを取得しながら、jQueryの便利メソッドについて確認してみます。

css

div#target{
    height: 100px;
    width: 100px;
    padding: 10px;
    margin: 10px;
    border: 1px solid #FFF;
    background-color: #CCC";
}

jQueryを使わないでやってみる

上のスタイルが適用された要素の大きさを、純粋なjavascriptで取得するには、window.getComputedStyle() (IE8ではcurrentStyle) メソッドを呼び出して、CSSStyleDeclaration オブジェクトを取得し、オブジェクトのgetPropertyValue()メソッドを使ってプロパティにアクセスします。(参照)
下の例だと、style.getPropertyValue("height")は要素そのものの高さのみ取得できるので、paddingやborderの幅を考慮する場合は、別途処理が必要になります。

var elem = document.getElementById('target');
var style = window.getComputedStyle(elem, null); // IE8では不可
alert( style.getPropertyValue("height") );              // 100px
alert( style.getPropertyValue("padding-top") );         // 10px
alert( style.getPropertyValue("padding-bottom") );      // 10px
alert( style.getPropertyValue("border-top-width") );    // 1px
alert( style.getPropertyValue("border-bottom-width") ); // 1px

jQueryを使ってシンプルに

jQueryを使えば、状況にあわせて、要素の大きさを簡単に取得できます。
例えば高さを取得する場合は、hight(), innerHeight(), outerHeight() が使えます。
それぞれのメソッドが返す値を、下のコードで確認してみました。

$( '#target' ).height();      //100
$( '#target' ).innerHeight(); //120 上下のpaddingの幅が含まれる
$( '#target' ).outerHeight(); //122 paddingの幅 + 上下のborderの幅が含まれる

上の実行結果から、

• .height() は要素そのものの高さを返す
• .innerHeight() はpadding を含む高さを返す
• .outerHeight() はpadding に加えて、border の幅も含む高さを返す
• .margin の値は影響しない

ということがわかりました。
もちろん以上の動作はwidth(), innerWidth(), outerWidth() でも同じです。

注意点

$(window)に対して innerWidth(), innerHeight(), outerWidth(), outeHeight() を実行すると、NaNが返されます。
window の大きさを取得したい場合は、$(window).height(), $(window).width() でOK。

まとめ

要素の大きさをjQueryで取得するには、

• .height() で要素そのものの高さを
• .innerHeight() で padding の幅を含めた高さを
• .outerHeight() で padding と border の幅を含めた高さを取得できる！

(.width() .innerWidth() .outerWidth() も同様)


参考文献
jQueryクックブック p140

jQueryクックブック