jquery positionメソッド

TOPページに戻る > jquery入門

jquery position()メソッド

positionメソッドは、指定した要素の親要素からの上からの位置と左からの位置を取得するメソッドです 要素の元の位置からのtopとleftの位置を取得します
親要素と指定した要素にcssでposition: relative;を指定すると親要素からのtopとleftの位置を取得できます

親要素からのtopとleftの位置を取得を取得する

$("セレクタ").position()

指定したHTML要素のcssのpositionプロパティの値を取得します

指定した要素をクリックしたときに、クリックした要素の親要素からの上からの位置と左からの位置を取得します
取得した値は変数に代入し、変数.top、変数.leftでテキストで表示します

jquery

$(function() {
	$("#hoge").click(function(){
	var hoge = $(this).position();
	$(this).html("positionの値は
上から"+ hoge.top + "
左から" + hoge.left);
	});
});

css

#foo {
 position: relative;
 }

#hoge {
 position: relative;
 top :50px;
 left: 100px;
 width: 300px ;
 height: 300px ;
 cursor: pointer;
 background-color: #F90;
 }

html

<div id="foo">
<div id="hoge">
</div>
</div>

サンプル