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

引き続き、左上からの要素の相対位置を設定する方法を学びます。

次は「複数要素」に対する左上からの相対位置を設定します。

2-2.offsetメソッド【返却値(jQueryオブジェクト) = 要素.offset(function)】で複数要素の左上からの相対位置を設定する

次に複数要素に対して、左上からの相対位置をまとめて変更します。

2-1.ではobjectオブジェクトに格納しましたが、今回は引数にfunctionを指定します。
引数に設定するFunctionの構文

function 任意のfunction名(インデックス番号, 現在の位置（objectオブジェクト）) {
  // ↓インデックスや現在の位置の引数が利用できる
  ・・・任意の処理・・・;
  // ↓最終的に移動したい位置をobjectオブジェクトに格納して返却する
  return 位置（objectオブジェクト）;
}

実際に動かしてみると、以下のようになります。

サンプルソース

// HTML
<input type="button" value="テストエリア１と２を右へ20px移動する"><br>
<div class="box">
  <div class="box"><b>テストエリア１</b><div class="box-css-test-area-1">・・・略・・・</div></div>
  <div class="box"><b>テストエリア２</b><div class="box-css-test-area-2">・・・略・・・</div></div>
</div>

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

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    // 【構文】返却値(jQueryオブジェクト) = 要素.offset(object)
    //   サンプル：それぞれのエリアを左から「テストエリア１：10px」、「テストエリア２：20px」移動する
    $(".box-css-test-area-1, .box-css-test-area-2").offset(setOffset);
    // ↑：setOffsetで各要素の相対位置を設定する
  });
});

// JavaScript
function setOffset(index, ptObj){
  var newObj = {};
  newObj.left = ptObj.left + 10 * (index + 1);
  return newObj;
}

実装例

テストエリア１とテストエリア２を同時に移動します。

テストエリア１

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）

ここでは引数のfunctionを利用する方法で実現しましたが、
前回のやり方でも可能です。

いかがでしたか？
次回は「3.親要素からの要素の相対位置を取得する」を学びます。

それでは、また。

• Tweet
• Share
• Share
• Share
• Share