jQuery の位置・サイズ関連メソッドまとめ

ばらけてきたのでこちらにまとめます。

索引

解説

位置の設定

css(name,value)

対象要素を指定した位置に配置できます。単位を省略した場合はピクセル単位となります。

$('#target').css(top,50)
$('#target').css(left,'100%')

//ハッシュで渡すことも可能
$('#target').css({top:50,left:100})
$('#target').css({top:'50%',left:'100%'})

配置しようとする要素の position 属性が、relative , absolute , fixed のいづれかになっていないと配置されません。

配置しようとする要素が position:absolute の場合

配置しようとする要素からみて、position 属性に relative , absolute , fixed のいづれかをもつ直近の親・先祖要素（コンテナ要素）の配置位置が原点位置となます。（コンテナ要素は offsetParent() メソッドで取得できます）

コンテナ要素に border がある場合は、border 幅を加算した値が原点位置になります。

配置しようとする要素に margin が設定されてる場合、margin を含んだ位置から配置されます。

親・先祖要素に、position:static な要素しか存在しない場合は、ドキュメントの左上( html 要素)が原点位置になります。

位置の取得

css(name)

下記のような記述で、対象要素の配置されてる位置を取得できます。

$('#target').css('top')  //100px
$('#target').css('left') //200px

位置を取得しようとする要素からみて、position 属性に relative , absolute , fixed のいづれかをもつ直近の親・先祖要素（コンテナ要素）の配置位置が原点位置となます。（コンテナ要素は offsetParent() メソッドで取得できます）

位置を取得しようとする要素が position:absolute の場合

コンテナ要素に border がある場合は、border 幅を加算した値が原点位置になります。

位置を取得しようとする要素に margin が設定されてる場合、margin を含んだ位置から取得されます。

親・先祖要素に、position:static な要素しか存在しない場合は、ドキュメントの左上( html 要素)が原点位置になります。

注意点

取得値は単位付きの文字列で返されるので、数値化したい場合は、parseInt 関数等で変換する必要があります。
例）parseInt($('#target').css('top'))

window や document オブジェクトに対し行うと、IE では undefined 、その他のブラウザでは実行時エラーとなります。

style タグ内での位置定義がカレントスタイルに適用されてる場合、css メソッドで取得される結果がブラウザにより異なります。(特に Firefox)
プラグイン等の汎用処理において、css メソッドで位置を取得する場合は注意が必要です。（position() メソッドの取得値を補正するのが良いかと思われます。）
詳細はこちら「IE6 向け position:fixed を right , bottom 指定にも対応させてみる - Cyokodog::Diary」

offset()

下記のような記述で、ドキュメントの左上( html 要素)を原点位置とした見た目上の配置位置が取得できます。

var offset=$('#target').offset();
offset.top  // 100
offset.left // 200

ここで言う見た目上とは、配置要素が position:relative な擬似フレームに内包されて且つスクロール状態にあった場合、物理的な配置位置に対し、スクロール量分ずれて見える位置の事で、offset メソッドは物理位置からこのスクロール量分を減算した見た目上の位置を返します。

ブラウザのスクロールバーをスクロールさせた場合

擬似フレームをスクロールさせた場合

event オブジェクトの pageY , pageX も同様の基準でイベントの発生位置を保持するので、イベント発生位置に対象要素を移動させたい場合は、offset メソッドの取得位置とイベント発生位置の差分を、対象要素の現在位置に加算する事で可能です。

注意点

html 要素に対して offset メソッドを実行すると、IEではブラウザのスクロールバーのスクロール量が取得されてしまいます。（他のブラウザでは 0 ）
window,document 対して offset メソッドを実行すると、IE では 0、他のブラウザでは実行時エラーとなります。

position()

下記のような記述で、コンテナ要素（position 属性に relative , absolute , fixed のいづれかをもつ直近の親・先祖要素）の配置位置を原点位置とした見た目上の配置位置が取得できます。

var offset=$('#target').offset();
offset.top  // 100
offset.left // 200

ここで言う見た目上とは、配置要素が position:relative な擬似フレームに内包されて且つスクロール状態にあった場合、物理的な配置位置に対し、スクロール量分ずれて見える位置の事で、position メソッドは物理位置からこのスクロール量分を減算した見た目上の位置を返します。
コンテナ要素が存在しない場合は、ドキュメントの左上( html 要素)を原点位置とした物理的な配置位置が取得されます。(css 的な意味での配置位置)

ブラウザのスクロールバーをスクロールさせた場合

擬似フレームをスクロールさせた場合

注意点

対象要素が非表示状態の場合、Safari3 と Firefox3 でエラーとなります。
html 要素に対して position メソッドを実行すると、IEではスクロール量が取得されてしまい、他のブラウザでは実行時エラーになってしまいます。
window,document オブジェクトに対して position メソッドを実行すると、IE では 0、他のブラウザでは実行時エラーになってしまいます。

scrollTop() / scrollLeft()

下記のような記述で、対象要素のスクロール量が px 単位で取得できます。

$('#target').scrollTop()  // 100
$('#target').scrollLeft() // 200

ブラウザのスクロールバーのスクロール量を取得する場合は、以下のいづれかの方法で記述します。

$('html').scrollTop();
$(window).scrollTop();
$(document).scrollTop();

注意点

Safari3 で $('html').scrollTop() とすると、常に0 が返されるので注意が必要です。

event.pageY / event.pageX

イベントオブジェクトのプロパティ値 pageY , pageX を参照することで、イベントの発生位置を取得できます。

$('html').click(function(event){
    alert(event.pageY);
    alert(event.pageX);
});

イベントを割り当てた要素がなにであるかにかかわらず、ドキュメントの左上( html 要素)を原点位置とした見た目上のイベント発生位置が取得できます。

要素の配置位置を取得する offset メソッドも同様に基準で配置位置を返すので、イベント発生位置に対象要素を移動させたい場合は、offset メソッドの取得位置とイベント発生位置の差分を、対象要素の現在位置に加算する事で可能です。

サイズの設定

css(name,value) / height(value) / width(value)

下記のような記述で、対象要素に幅、高さを設定できます。

$('#target').css(height,50)
$('#target').css(width,'100%')
$('#target').css({height:50,width:'100%'})

$('#target').height(50);
$('#target').width('100%');

指定したサイズには、margin , border-width , padding は含まれません。

サイズの取得

css(name) / height() / width()

下記のような記述で、対象要素の幅、高さを取得できます。

$('#target').css('height');
$('#target').css('width');

$('#target').height();
$('#target').width();

取得されるサイズには、margin , border-width , padding は含まれません。

height() / width() の注意点

$('html'),$(window),$(document) でこのメソッドを実行すると、ブラウザ間で異なる値が取得されます。（下図参照）

	$('html')	$(window)	$(document)
IE6	h2:w2	h1:w1	h3:w3
IE7	h1:w1	h1:w1	h3:w3a
IE8	h3:w1	h2:w2	h3:w1
Firefox3	h3:w1	h1:w1	h3:w3a
Safari3	h3:w1	h2:w2	h3:w3a
Opera9.5	h3:w1	h3b:w3b	h3:w3a

Opera9.5 の w1 と w3b は更にスクロールバーの幅を引いた値になってます。

attr(clientHeight / offsetHeight / scrollHeight)

下記のような記述で、対象要素の幅、高さを取得できます。

$('#target').attr('clientHeight')
$('#target').attr('clientWidth')

$('#target').attr('offsetHeight')
$('#target').attr('offsetWidth')

$('#target').attr('scrollHeight')
$('#target').attr('scrollWidth')

各メソッドの取得範囲は下図のとおりです。

普通のボックス要素

スクロールバー付きボックス要素

非表示領域を持つスクロールバー付きボックス要素

clientHeight で内寸が求まります。（スクロールバーの高さは含まれません。）
offsetHeight で外寸が求まります。
scrollHeight で非表示領域も含めた全体のサイズが求まります。

注意点

対象要素が非表示状態になっているとサイズが取得できません。
$(window),$(document) でこれらのメソッドを実行すると、全てのブラウザで実行時エラーになります。
$('html') でこのメソッドを実行すると、ブラウザ間で異なる値が取得されます。（下図参照）

	offsetHeight系	scrollHeight系	clientHeight系
IE6	h2:w2	h2:w3	h1:w1
IE7	h１:w1	h3:w3a	h1:w1
IE8	h3:w1	h3:w1	h２:w2
Firefox3	h3:w1	h3:w3a	h1:w1
Safari3	h3:w1	h3:w3a	h1:w1
Opera9.5	h3:w1	h3:w3a	h1:w1

outerHeight() / innerHeight()

下記のような記述で、対象要素に幅、高さを取得できます。

$('#target').outerHeight();
$('#target').outerWidth();

$('#target').innerHeight();
$('#target').innerHeight();

各メソッドの取得範囲は下図のとおりです。

outerHeight は外寸を求めます。( attr('offsetHeight') と同じ)
innerHeight は内寸を求めます。(スクロールバーの高さを含むところが attr('clientHeight') と異なる)

注意点

$('html'),$(window),$(document) でこのメソッドを実行すると、ブラウザ間で異なる値が取得されます。（下図参照）

	$('html')	$(window)	$(document)
IE6	h2:w2	h1:w1	h3:w3
IE7	h1:w1	h1:w1	h3:w3a
IE8	h3:w1	h2:w2	h3:w1
Firefox3	h3:w1	error	error
Safari3	h3:w1	error	error
Opera9.5	h3:w1	error	error

Opera9.5 の w1 は更にスクロールバーの幅を引いた値になってます。

コンテナ要素の取得

offsetParent()

対象要素からみて、position 属性に relative , absolute , fixed のいづれかをもつ直近の親・先祖要素（コンテナ要素）を返します。

$('#target').offsetParent();

コンテナ要素が見つからなかった場合は、$('html')を返します。

注意点

IE 以外のブラウザで offsetParent() を実行すると、body 要素の position が static にもかかわらず何故か body 要素が返ってきてしまいます。必要に応じ html 要素に置換する必要があります。