（jQueryの学習）CSS：相対位置を操作する／offsetメソッド／左上からの要素の相対位置を取得する（その１）

今回からはCSSの相対位置を操作する方法を学びます。
以下、3つのカテゴリに分けて見ていきます。

1. 左上からの要素の相対位置を取得する
2. 左上からの要素の相対位置を設定する
3. 親要素からの要素の相対位置を取得する

ここではjQueryにてCSSで定義された要素に対して、
左上からの相対位置の操作方法を整理します。

相対位置を操作するには、
用途に応じて「offsetメソッド」、「positionメソッド」を利用する必要があります。
メソッドの種類は以下の通り。

■左上からの相対位置を取得する
　・返却値（objectオブジェクト）＝要素．offset（）　※ver1.2～
■左上からの相対位置を設定する
　・返却値（jQueryオブジェクト）＝要素．offset（object）　※ver1.4～
　・返却値（jQueryオブジェクト）＝要素．offset（function）　※ver1.4～
■親要素からの相対位置を取得する
　・返却値（objectオブジェクト）＝要素．position（）　※ver1.2～

これらのメソッドを使うことで、要素のいろいろな相対位置が取得ができるようになります。

それでは本日は「1.左上からの要素の相対位置を取得する」を学びます。

まずは「単一要素」に対する左上からの相対位置を取得します。

1.左上からの要素の相対位置を取得する

1-1.offsetメソッド【返却値(objectオブジェクト) = 要素.offset( )】で1つの要素の左上からの相対位置を取得する

左上からの要素の相対位置を取得するためにはoffsetメソッドを利用します。

閲覧中のWebページ上、対象の要素がどの位置にあるのかが取得できます。

なお、対象要素の位置の基準点は、border外側の左上の角になり、marginは含みません。
（わかりにくいですが、「テストエリア１」や「テストエリア２」の「テ」文言のすぐ下あたりになります）

サンプルソース

// HTML
<input type="button" value="ボタンを押すと、左上からの要素の相対位置が表示されます"><br>
<div class="box">
  <div class="box"><b>テストエリア１</b><div class="box-css-test-area-1">・・・略・・・</div></div>
</div>

// CSS
/* テストエリア１ */
.box-css-test-area-1 {background:#F5EEFF; border:5px solid #88f; padding:10px; margin:20px; height:40px; width:460px;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    // 【構文】返却値(objectオブジェクト) = 要素.offset()
    //   サンプル：「テストエリア１」の左上からの相対位置を取得する
    // 左からの相対位置
    alert("[" + $(".box-css-test-area-1").offset().left + "]");
    // 上からの相対位置
    alert("[" + $(".box-css-test-area-1").offset().top + "]");
  });
});

実装例

指定した要素に対する左上からの相対位置を取得します。

要素: テストエリア１テストエリア２

テストエリア１

border:5px; padding:10px; margin:20px; height:40px; width:460px;
（境界線:5px、枠内余白:10px、枠外余白:20px、高さ:40px、幅:460px）

テストエリア２

border:5px; padding:20px; margin:10px; height:30px; width:450px;
（境界線:5px、枠内余白:20px、枠外余白:10px、高さ:30px、幅:450px）

次回は「複数要素」に対する左上からの相対位置を取得する方法を学びます。

それでは、また。

• Tweet
• Share
• Share
• Share
• Share