jQueryのoffset()とposition()の使い方の詳細
17568 ワード
offset()とposition()の使い方の詳細:
この2つの方法は非常によく使われていますが、同時に習得するのは難しいので、この2つの方法の使い方を紹介します.
基本的な定義を見てみましょう.
1.offset()メソッドの定義:
この方法では、現在のdocumentでの一致要素の相対オフセットを取得または設定します.
このメソッドは、表示される要素にのみ有効です.
オフセット量を取得すると、メソッドの戻り値は、2つの整数属性(topおよびleft)を含むオブジェクトです.
オフセット量を設定する場合、このメソッドのパラメータはtopとleftプロパティを持つオブジェクトです.
具体的な使い方は、jQueryのoffset()メソッド節を参照してください.
2.position()メソッドの定義:
親要素に対する一致する要素のオフセットを取得します.
返されるオブジェクトには、2つの整形プロパティ(topおよびleft)のオブジェクトが含まれます.
結果を正確に計算するには、補白、枠線、塗りつぶしのアトリビュートにピクセル単位を使用します.
このメソッドは、表示される要素にのみ有効です.
具体的な使い方は、jQueryのposition()メソッド節を参照してください.
しかし、この方法は定義だけでは簡単ではありません.実際の適用では、親要素に対する一致する要素のオフセット量を取得するだけではありません.
実際にposition()メソッドは、要素をCSSの絶対位置決めで処理することである.すなわち、position属性値はabsolute(もちろん要素の位置決め方式を本当に絶対位置決めに設定するわけではない)であり、このときの位置決め参照対象は正確には、最も近い位置決めを持つ親要素であり、CSSの絶対位置決めの原則と同じであるべきである.position絶対位置決めはどのオブジェクトを参考にしますか?の章を参照してください.
コードの例は次のとおりです.
最後のまとめ:1.offset()メソッドは、ドキュメントに対する一致要素のオフセット量を取得し、オブジェクト自体と親要素の位置付けには関係ありません.2.position()方法はやや複雑である:1).この方法で取得されたオフセット量は、祖先要素に絶対位置決めまたは相対位置決めが使用されている場合に、最近の位置決めが使用されている祖先要素を参照します.2).このメソッドで取得したオフセットの量は、祖先要素に絶対位置決めまたは相対位置決めが使用されていない場合、ウィンドウを参照オブジェクトとします.
この2つの方法は非常によく使われていますが、同時に習得するのは難しいので、この2つの方法の使い方を紹介します.
基本的な定義を見てみましょう.
1.offset()メソッドの定義:
この方法では、現在のdocumentでの一致要素の相対オフセットを取得または設定します.
このメソッドは、表示される要素にのみ有効です.
オフセット量を取得すると、メソッドの戻り値は、2つの整数属性(topおよびleft)を含むオブジェクトです.
オフセット量を設定する場合、このメソッドのパラメータはtopとleftプロパティを持つオブジェクトです.
具体的な使い方は、jQueryのoffset()メソッド節を参照してください.
2.position()メソッドの定義:
親要素に対する一致する要素のオフセットを取得します.
返されるオブジェクトには、2つの整形プロパティ(topおよびleft)のオブジェクトが含まれます.
結果を正確に計算するには、補白、枠線、塗りつぶしのアトリビュートにピクセル単位を使用します.
このメソッドは、表示される要素にのみ有効です.
具体的な使い方は、jQueryのposition()メソッド節を参照してください.
しかし、この方法は定義だけでは簡単ではありません.実際の適用では、親要素に対する一致する要素のオフセット量を取得するだけではありません.
実際にposition()メソッドは、要素をCSSの絶対位置決めで処理することである.すなわち、position属性値はabsolute(もちろん要素の位置決め方式を本当に絶対位置決めに設定するわけではない)であり、このときの位置決め参照対象は正確には、最も近い位置決めを持つ親要素であり、CSSの絶対位置決めの原則と同じであるべきである.position絶対位置決めはどのオブジェクトを参考にしますか?の章を参照してください.
コードの例は次のとおりです.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.51texiao.cn/" />
<title>offset() position() - </title>
<style type="text/css">
body{
margin:15px;
width:960px;
}
.parent{
border:3px solid #ccc;
width:600px;
height:300px;
margin-left:55px;
padding:25px;
}
.child{
background:#666;
width:200px;
height:200px;
color:#fff;
}
.copyright{
position:absolute;
right:0;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".child").each(function(){
var text = "position().left="+$(this).position().left;
text +="<br>position().top="+$(this).position().top;
text +="<br>offset().left="+$(this).offset().left;
text +="<br>offset().top="+$(this).offset().top;
text +="<br> parent offset().top="+$(this).parents(".parent").offset().top;
text +="<br> parent offset().left="+$(this).parents(".parent").offset().left;
$(this).html(text);
})
})
</script>
</head>
<body>
<div class="parent" style="float:right">
position ，static。 position ，static。offset position
<div class="child"></div>
</div>
<div style="clear:both"></div>
<div class="parent" style="position:relative">
position ralative, position static。offset position
<div class="child"></div>
</div>
<br/>
<div style="position:absolute;padding:15px;border:3px solid #ff0000;">
<div class="parent">
position absolute, position static。offset position
<div class="child"></div>
</div>
</div>
</body>
</html>最後のまとめ:1.offset()メソッドは、ドキュメントに対する一致要素のオフセット量を取得し、オブジェクト自体と親要素の位置付けには関係ありません.2.position()方法はやや複雑である:1).この方法で取得されたオフセット量は、祖先要素に絶対位置決めまたは相対位置決めが使用されている場合に、最近の位置決めが使用されている祖先要素を参照します.2).このメソッドで取得したオフセットの量は、祖先要素に絶対位置決めまたは相対位置決めが使用されていない場合、ウィンドウを参照オブジェクトとします.