• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン
2015/06/01
書いた人:
tanippa!
カテゴリ:
javascript   jQuery
115,883 views

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

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

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

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

目次

サイズ取得関係の関数

サイズ取得の基本

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

方法 説明
width()
height()
paddingを除いた内側のサイズを取得
innerWidth()
innerHeight()
paddingを含んだサイズを取得
outerWidth()
outerHeight()
paddingとborderを含んだサイズを取得
outerWidth(true)
outerHeight(true)
marginまで含んだサイズを取得

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

size1

ここで注意しないといけないのは、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');
というようにcss関数で取得しましょう。

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

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

ページ全体のサイズは

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

ブラウザサイズは

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

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

要素の座標の取得方法

座標取得の基本

方法 説明
offset() ページ左上に対する座標を取得
position() cssのpositionの基準となる親から見た座標を取得

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

offset

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();

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

scroll

以上

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

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

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


この記事を読んだ人はこんな記事も読んでいます