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

CSSの要素の相対位置を操作する方法の2回目です。

本日は「2.左上からの要素の相対位置を設定する」を学びます。

2.左上からの要素の相対位置を設定する

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

次に要素の左上からの相対位置を変更します。

「テストエリア」の位置を変えてみます。

値はobjectオブジェクトに格納する必要があります。
なお、「50」と数値型で指定することができ、
さらに算術複合代入子（+=、-=）を使用した相対的な指定も可能。

サンプルソース

// HTML
<input type="button" value="指定したテストエリアを右へ50px移動する"><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(){
    // 【構文】返却値(jQueryオブジェクト) = 要素.offset(object)
    //   サンプル：「テストエリア１」の左からの相対位置を設定する
    var offsetObj = {};         // objectオブジェクト宣言
    offsetObj.left = $(".box-css-test-area-1").offset().left; // 変更前の位置をobjectに設定
    offsetObj.left = 50;  // ←絶対値指定・・・右から50pxの位置にする
    offsetObj.left += 50; // ←相対値指定・・・右へ50px移動する
    $(".box-css-test-area-1").offset(offsetObj);
  });
});

実装例

指定した要素を移動します。

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

テストエリア１

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