[ jQuery ] 要素の画面上の表示位置を取得する ( offset 関数 )

jQuery.offset() 関数を使用して要素の画面上の表示位置を取得するサンプルスクリプトを掲載します。

jQuery.offset 関数は表示位置の競っても出来るようですが、ここでは取得のみのサンプルとなります。なお、次の HTML を使用して確認していきます。

HTML

<div id="block1">第1ブロック</div>
<div id="block2">第2ブロック</div>
<div id="block3">第3ブロック</div>

要素のオフセット位置の取得サンプル

    var offset;
    offset = $("#block1").offset();
    console.log("offset left = " + offset.left + " offset top = " + offset.top);
    
    offset = $("#block2").offset();
    console.log("offset left = " + offset.left + " offset top = " + offset.top);
    
    offset = $("#block3").offset();
    console.log("offset left = " + offset.left + " offset top = " + offset.top);

/*
出力結果(加工してあります)
div.block1 offset left = 8 offset top = 8
div.block2 offset left = 8 offset top = 24
div.block3 offset left = 8 offset top = 40
*/

display:none を設定した場合

次に、以下のように block2 を非表示にしてみたときのオフセット位置を確認してみます。

<div id="block1">第1ブロック</div>
<div id="block2" style="display:none;">第2ブロック</div>
<div id="block3">第3ブロック</div>

非表示にすると、上から順に以下のように出力されます。block2 はオフセットが top, left ともに 0 となりました。block3 は上に詰められていることが確認できます。なお、type = hidden の input タグなどもこれと同じように top や left は 0 となります。期待通りの結果だと思われます。

/*
  div.block1 offset left = 8 offset top = 8
  div.block2 offset left = 0 offset top = 0
  div.block3 offset left = 8 offset top = 24
*/

visibility:hidden を設定した場合

次に、block2 の style を display:none から visibility:hidden に変更して確認してみると、以下のような結果となります。

/*
  div.block1 offset left = 8 offset top = 8
  div.block2 offset left = 8 offset top = 24
  div.block3 offset left = 8 offset top = 40
*/

HTMLの表示上も第2 ブロックの部分が詰められて表示されているわけではありません。表示されている場合と全く同じ結果となります。今はタマタマ見えない状態である要素が存在していることになります。

参考

• .offset()