jQuery API の offset( coordinates ) は、マッチした要素の、位置座標を設定するメソッド。topとleftのプロパティを含むオブジェクトを、引数coordinatesに指定することで、位置座標を設定する。
引数
- coordinates
topとleftのプロパティを含むオブジェクト。
{ top: 上からの位置, left: 左からの位置 }
記述方法
jQuery( セレクター ) . offset( { top: 上からの位置, left: 左からの位置 } );
「セレクター」にマッチした要素の位置座標を設定する。
記述例
jQuery( '.jquery-sample' ) . offset( { top: 250, left: 200 } );
クラス名が「jquery-sample」である要素の位置座標を、上から250px、左から200pxの位置に設定する。
実装例（サンプル）
top：
left：
実装例（サンプル）の動作について
赤色、青色、緑色の背景色のボックスの、いづれかのボックス要素をクリックすると、下へ20px、右へ20px移動する。移動後の座標を取得し、「top：」の右側に、上からの位置、「left：」の右側に左からの位置を、クリックしたボックス要素の背景色のテキストで表示する。ボックス要素を再度クリックすると、元の位置へ戻る。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-offset > div' ) . toggle(
function () {
var offset = jQuery( this ) . offset();
jQuery( this ) . offset( { top: offset . top + 20, left: offset . left + 20 } );
var newOffset = jQuery( this ) . offset();
var strBackgroundColor = jQuery( this ) . css( 'background-color' );
jQuery( '#jquery-sample-message-top' ) . text( newOffset . top ) . css( 'color', strBackgroundColor );
jQuery( '#jquery-sample-message-left' ) . text( newOffset . left ) . css( 'color', strBackgroundColor );
},
function () {
var offset = jQuery( this ) . offset();
jQuery( this ) . offset( { top: offset . top - 20, left: offset . left - 20 } );
var newOffset = jQuery( this ) . offset();
var strBackgroundColor = jQuery( this ) . css( 'background-color' );
jQuery( '#jquery-sample-message-top' ) . text( newOffset . top ) . css( 'color', strBackgroundColor );
jQuery( '#jquery-sample-message-left' ) . text( newOffset . left ) . css( 'color', strBackgroundColor );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-offset > div' ) . toggle(
function () {
var offset = jQuery( this ) . offset();
jQuery( this ) . offset( { top: offset . top + 20, left: offset . left + 20 } );
var newOffset = jQuery( this ) . offset();
var strBackgroundColor = jQuery( this ) . css( 'background-color' );
jQuery( '#jquery-sample-message-top' ) . text( newOffset . top ) . css( 'color', strBackgroundColor );
jQuery( '#jquery-sample-message-left' ) . text( newOffset . left ) . css( 'color', strBackgroundColor );
},
function () {
var offset = jQuery( this ) . offset();
jQuery( this ) . offset( { top: offset . top - 20, left: offset . left - 20 } );
var newOffset = jQuery( this ) . offset();
var strBackgroundColor = jQuery( this ) . css( 'background-color' );
jQuery( '#jquery-sample-message-top' ) . text( newOffset . top ) . css( 'color', strBackgroundColor );
jQuery( '#jquery-sample-message-left' ) . text( newOffset . left ) . css( 'color', strBackgroundColor );
}
);
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample {
width: 300px;
height: 200px;
margin: 10px;
padding: 20px;
background-color: pink;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-sample-offset div {
float: left;
width: 50px;
height: 50px;
margin: 10px;
border: 1px solid gray;
border-radius: 10px;
cursor: pointer;
}
-->
</style>
<!--
#jquery-sample {
width: 300px;
height: 200px;
margin: 10px;
padding: 20px;
background-color: pink;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-sample-offset div {
float: left;
width: 50px;
height: 50px;
margin: 10px;
border: 1px solid gray;
border-radius: 10px;
cursor: pointer;
}
-->
</style>
HTML
<div id="jquery-sample">
<p>
top：<span id="jquery-sample-message-top"></span>
</p>
<p>
left：<span id="jquery-sample-message-left"></span>
</p>
<div id="jquery-sample-offset">
<div style="background-color: red;"></div>
<div style="background-color: blue; position: relative; top: 25px;"></div>
<div style="background-color: green; position: relative; top: 50px;"></div>
<span style="clear: left;"></span>
</div>
</div>
<p>
top：<span id="jquery-sample-message-top"></span>
</p>
<p>
left：<span id="jquery-sample-message-left"></span>
</p>
<div id="jquery-sample-offset">
<div style="background-color: red;"></div>
<div style="background-color: blue; position: relative; top: 25px;"></div>
<div style="background-color: green; position: relative; top: 50px;"></div>
<span style="clear: left;"></span>
</div>
</div>