ywork2020.com

Title

要素の相対位置の取得と設定を行う

目次 (INDEX)

offsetとは

ここで説明する offset とは次の語句からなるjQueryのメソッドです。
offset
読み: オフセット
意味: 相殺する、埋め合わせる

目次に戻る

offsetメソッドの概要

このメソッドは、現在のドキュメントに対しての要素の相対位置を取得、または設定します。

このメソッドの引数が空の場合は要素の座標の取得を行います。 引数を指定した場合は要素の座標の設定を行います。

offset() は、topプロパティ と leftプロパティ を持っており、これにより要素の座標を取得、または設定します。 つまり、topプロパティ と leftプロパティ の値の取得と設定を行うことで、このメソッドは機能します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

offset() の引数が空の場合は、値の取得を行います。取得される値はドキュメントの原点からのオフセット値になります。 また、引数を指定された型で与えた場合は、値の設定を行います。

$(Selector).offset();
$(Selector).offset(Object);
$(Selector).offset(Function);

目次に戻る

サンプルコードと実行結果

ここでは、div要素を題材にします。 この要素をクリックするとマウスの動きに連動して、要素のオフセットポジションが設定され、座標の取得と表示も行います。 また、ダブルクリックすることで移動を解除します。

サンプルコード: CSS
<style>
	#idDiv{
		border: thin solid currentColor;
		padding: 9px;
		width: 180px;
		height: 180px;
	}
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div id="idDiv">Element</div>
	<script>...</script>
</body>
  • 06: div (識別子に idDiv を持つ要素です。この要素のポジション値の取得と設定を行います。)
サンプルコード: script
<script>
	let myObj = new Object();
	$("#idDiv").click(function(){
		$(this).css("background-color", "##lightblue");
		$(document).mousemove(function(event){
			myObj.top = event.pageY - ($("#idDiv").outerHeight()/2);
			myObj.left = event.pageX - ($("#idDiv").outerWidth()/2);
			$("#idDiv").offset(myObj);
			$("#idDiv").html(
				"<div>top : " + Math.floor($("#idDiv").offset().top) + "</div>" +
				"<div>left : " + Math.floor($("#idDiv").offset().left) + "</div>"
			);
		});
	});
	$("#idDiv").dblclick(function(){
		$(this).css("background-color", "transparent");
		$(document).off();
	});
</script>
  • 08: $("#idDiv").offset(myObj) (Object のインスタンスを使ってオフセットポジションの設定を行います。)
  • 10: $("#idDiv").offset().top (topプロパティを使ってオフセットポジションの垂直軸の座標を取得しています。)
  • 11: $("#idDiv").offset().left (leftプロパティを使ってオフセットポジションの水平軸の座標を取得しています。)
  • 下記のコードは 上記のコードと同じことをしていますが、Object のインスタンスを生成しないで、 offset(引数)に直接のオブジェクト型でプロパティを設定しています。
    <script>
    	$("#idDiv").click(function(){
    		$(this).css("background-color", "##lightblue");
    		$(document).mousemove(function(event){
    			$("#idDiv").offset({
    				"top":event.pageY - ($("#idDiv").outerHeight()/2)
    				"left":event.pageX - ($("#idDiv").outerWidth()/2), 
    			});
    			$("#idDiv").html(
    				"<div>top : " + Math.floor($("#idDiv").offset().top) + "</div>" +
    				"<div>left : " + Math.floor($("#idDiv").offset().left) + "</div>"
    			);
    		});
    	});
    	$("#idDiv").dblclick(function(){
    		$(this).css("background-color", "transparent");
    		$(document).off();
    	});
    </script>
    
実行結果:
[補足]
サンプル要素の左上の赤い点の位置が、この要素の座標になります。 サンプル要素をクリックすると要素がマウスの移動と連動します。 なお、タッチスクリーンで実行した場合にはタップの位置に要素は移動します。 移動を解除するにはサンプル要素をダブルクリック(ダブルタップ)してください。
Element

目次に戻る