jQueryのposition()メソッド_jqueryの詳しい説明-jsチュートリアル-php.cn

jQueryのposition()メソッド_jqueryの詳しい説明

WBOY

リリース： 2016-05-16 15:49:39

オリジナル

1497 人が閲覧しました

position() メソッドの定義と使用法:

このメソッドは、ある要素を基準とした、一致した要素のオフセットを取得します。

返されたオブジェクトには、2 つの整数属性 (上と左) を持つオブジェクトが含まれています。

このメソッドは、表示されている要素に対してのみ機能します。

文法構造:

$(selector).position()

ログイン後にコピー

チュートリアルの冒頭で、これを行う理由は、一部の要素に対する一致する要素のオフセットを取得するためです。多くのチュートリアルでは、メソッドによって返されるオフセットは親要素に対して相対的であると説明されていますが、これは完全に真実ではありません。もちろん、これは、一致する要素が実際に設定されることを意味するわけではありません。絶対的な位置決め。このメソッドのオフセット参照原理は次のとおりです:

1. 親要素が位置決めを使用しない場合 (位置属性値が相対、絶対、または固定)、オフセット参照オブジェクトはウィンドウになります。

2. 親要素のいずれかが位置決めを使用する場合、オフセットの参照オブジェクトは位置決めを使用する最も近い要素です。

コード例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
*{
 margin:0px;
 padding:0px;
}
.father{
 background-color:green;
 width:200px;
 height:200px;
 padding:50px;
 margin-bottom:50px;
 margin-left:100px;
}
.children{
 height:150px;
 width:150px;
 background-color:red;
 line-height:150px;
 text-align:center;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".children").each(function(){
  var text;
  text="left:"+$(this).position().left;
  text+="top:"+$(this).position().top;
  $(this).text(text);
 })
})
</script>
</head>
<body>
<div class="father" style="position:relative">
 <div class="children"></div>
</div>
<div class="father">
 <div class="children"></div>
</div>
</body>
</html>

ログイン後にコピー

上記のコードの一番上の組み合わせでは、親要素が相対位置を使用しているため、取得されるオフセットは親要素に対して相対的なものになります。一番下の組み合わせでは、親要素は位置決めを使用しないため、オフセット参照オブジェクトはウィンドウになります。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。