offset( function( index, coords ) )

jQuery API の offset( function( index, coords ) ) は、マッチした要素の位置座標を、function関数で設定するメソッド。インデックス番号と現在の位置座標を、引数として、function関数に引き渡すことができる。

引数

function( index, coords )

topとleftのプロパティを含むオブジェクト。

index

インデックス番号。

coords

現在の位置座標。

記述方法

jQuery( セレクター ) . offset( function( インデックス番号, 現在の位置座標 ) {
    return { top: 上からの位置, left: 左からの位置 } );
} );

「セレクター」にマッチした要素の位置座標を設定する。「インデックス番号」と「現在の位置座標」を、引数として、function関数に引き渡すことができる。

記述例

jQuery( '.jquery-sample' ) . offset( function( index, offset ) {
    return { top: offset . top + 20, left: offset . left + 20 } );
} );

クラス名が「jquery-sample」である要素の位置座標を、現在の位置から、下へ20px、右へ20px移動する。

実装例(サンプル)

top:

left:

実装例(サンプル)の動作について

赤色、青色、緑色の背景色のボックスの、いづれかのボックス要素をクリックすると、下へ20px、右へ20px移動する。移動後の座標を取得し、「top:」の右側に、上からの位置、「left:」の右側に左からの位置を、クリックしたボックス要素の背景色のテキストで表示する。ボックス要素を再度クリックすると、元の位置へ戻る。

実装例(サンプル)のソースコード

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-sample-offset > div' ) . toggle(
        function () {
            jQuery( this ) . offset( function( index, offset ) {
                newOffset = new Object();
                newOffset . top = offset . top + 20;
                newOffset . left = offset . left + 20;
                return newOffset;
            } );
            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 () {
            jQuery( this ) . offset( function( index, offset ) {
                newOffset = new Object();
                newOffset . top = offset . top - 20;
                newOffset . left = offset . left - 20;
                return newOffset;
            } );
            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>

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>

スポンサード リンク

カテゴリー: API, CSS, DOM操作, JavaScript, jQuery, オフセット, スタイルプロパティ タグ: パーマリンク