js STUDIO

.offset()

documentを基準として、マッチしている要素集合の1つ目の要素の現在の座標を取得、または各要素の座標を設定します。

.offset( ) 1.2追加

戻り値:Object

マッチしている要素集合の1つ目の要素のdocumentを基準にした現在の座標を取得します。

.offset()メソッドは、documentを基準とする要素の位置情報を取得します。 これとは対照的に、.position()は、 オフセットの関係にある親要素を基準に現在位置を取得します。 グローバルな位置による操作(特にドラッグ&ドロップの実装)のために存在する要素の先頭に新しい要素を配置する場合には、 .offset()を使用するとより便利です。

.offset()は、topとleftを含むオブジェクトを返します。

注意: jQueryはhidden要素のオフセットの座標の取得、 またはbody要素に設定されたborder、margin、paddingを考慮しての位置計算をサポートしません。 visibility:hiddenが設定された要素の座標の取得が可能である一方、 display:noneはレンダリングツリーから除外されるため、未定義(undefined)のpositionとなります。

追加の注意事項

.offset()を含む寸法に関係するAPIによって返される数値は、 場合によっては端数になることがあります。 コード上でこれを整数とみなすべきではありません。 また、寸法に関する情報はユーザーによってページがズームされている場合、不正確になる可能性があり、 ブラウザはこの状態を検出するAPIを提供していません。

.offset( coordinates ) 1.4追加

戻り値:jQuery

マッチしている各要素に、documentを基準にした現在座標を設定します。(オブジェクトを指定)

引数 説明
coordinates

型：PlainObject

topとleftプロパティを含むオブジェクトを指定します。 このプロパティは要素の新しいtopとleftの座標を示す数値になります。

.offset( function(index, coords) ) 1.4追加

戻り値:jQuery

マッチしている各要素に、documentを基準にした現在座標を設定します。(オブジェクトを返す関数を指定)

引数 説明
function(index, coords)

型：Function
関数の戻り値：PlainObject

設定される座標を返す関数を指定します。

index
要素のインデックス番号
coords
変更前の位置を指し示すオブジェクト

この関数は、新しい座標を示すtopとleftのプロパティを持つオブジェクトを返す必要があります。

例:座標の取得 

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>offset demo</title>
  <style>
  p {
    margin-left: 10px;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>Hello</p><p>2nd Paragraph</p>

<script>
var p = $( "p:last" );
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
</script>

</body>
</html>

例:クリックして座標を取得 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>offset demo</title>
  <style>
  p {
    margin-left: 10px;
    color: blue;
    width: 200px;
    cursor: pointer;
  }
  span {
    color: red;
    cursor: pointer;
  }
  div.abs {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 220px;
    top: 35px;
    background-color: green;
    cursor: pointer;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div id="result">Click an element.</div>
<p>
  This is the best way to <span>find</span> an offset.
</p>
<div class="abs">
</div>

<script>
$( "*", document.body ).click(function( event ) {
  var offset = $( this ).offset();
  event.stopPropagation();
  $( "#result" ).text( this.tagName +
    " coords ( " + offset.left + ", " + offset.top + " )" );
});
</script>

</body>
</html>

例:座標の設定 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>offset demo</title>
  <style>
  p {
    margin-left: 10px;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>Hello</p><p>2nd Paragraph</p>

<script>
$( "p:last" ).offset({ top: 10, left: 30 });
</script>

</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM