jQueryでのサイズ、座標の取得方法まとめ

jQueryを使っていると、頻繁に要素のサイズや位置を取得する機会があります。

サイズや座標を取得する関数は複数あって「どれがどこのサイズ、座標を取得するの？」ってごっちゃになりがちなので、今回はサイズ、位置関係のそれぞれのjQuery関数の違いなどをまとめて紹介したいと思います。

目次

• サイズ取得関係の関数
  • サイズ取得の基本
  • ページ全体のサイズやブラウザサイズを取得したい
• 要素の座標の取得方法
  • 座標取得の基本
  • 番外編：offsetParentってoffsetと関係あるの？
• スクロールした距離を取得する方法

サイズ取得関係の関数

サイズ取得の基本

サイズの取得には、以下の4つの方法があります。

各方法を画像でわかりやすくするとこんな感じです。

ここで注意しないといけないのは、width()はcssで設定したwidthとは違うという点です。

どういうことか、実例を示します。

<style>
  #Size1Box {
    width: 100px;
    height: 100px;
    padding: 20px;
    margin: 10px;
    border: 5px solid black;
    background: red;
    box-sizing: border-box;
  }
</style>

このようにborder-boxを指定した要素を用意します。この要素の各サイズを出力すると下記のようになります。

このように、スタイルでは「width: 100px」と指定したのに、width()の出力値が50となっているはずです。
これは、「box-sizing: border-box;」により「中身の幅 + padding + border = cssのwidth」となり、jQueryのwidth関数は「中身の幅」を返すためcssのwidthからpaddingとborder分差し引いた50pxが返されるという事です。

jQueryのwidth関数は「中身の幅」を取得するための関数ということに注意しましょう。
cssで設定されたwidthの値を取得したい場合は、

$('#IdName').css('width');

ページ全体のサイズやブラウザサイズを取得したい

document,windowを使用すれば可能です。

ページ全体のサイズは

$(document).width();
$(document).height();

ブラウザサイズは

$(window).width();
$(window).height();

で取得出来ます。（document,windowに対するinnerWidthやouterWidthは、widthと同じ値を返します。）

要素の座標の取得方法

座標取得の基本

cssのpositionはまだよくわからない、という方は、CSS positionを使ってみよう！や、見ながら覚えよう！positionプロパティ「absolute」と「relative」についてのお話を参考に読んでみてください。

offset()とposition()は、

{
  top: xxx,
  left: xxx
}

という形の連想配列を返すので、topかleftのどちらかだけ必要、という場合は

var topOffset =  $('#IdName').offset().top;
var leftOffset = $('#IdName').offset().left;

というような書き方で片方だけを取得出来ます。

番外編：offsetParentってoffsetと関係あるの？

答え：ないです。

offsetParentは、positionが設定されている先祖要素の中で一番近い物を取得する関数です。

名前からoffsetと関係がありそうに見えてしまいますが、どちらかというと関係あるのはpositionですね。

スクロールした距離を取得する方法

どれだけページをスクロールしたかは「scrollTop」関数を使用します

var vScrollDistance = $(window).scrollTop();

また、横方向にどれだけスクロールしたかも「scrollLeft」関数で取得出来ます。

var hScrollDistance = $(window).scrollLeft();

それぞれは下記のようなイメージです。

以上

以上がjQueryでのサイズ、座標取得方法のまとめでした。

サイズの取得なんかはwidthとinnerWidthがごっちゃになりがちなので注意しておきましょう。

以上、たにっぱでした〜。