jQuery CSS操作-position()方法
3023 ワード
定義と使用法
position()メソッドは、親要素に対する一致要素の位置(オフセット)を返します.このメソッドで返されるオブジェクトには、topとleftの2つの整数属性があり、ピクセルで計算されます.このメソッドは、表示される要素にのみ有効です.
構文
≪インスタンス｜Instance｜emdw≫
要素の現在の位置を取得するには、次の手順に従います.
完全な小例
方法のまとめ
1.$("#box").position()の出力値はオブジェクトであり、{「left」:xxx、「top」:xxx}(これのように);$("#box").position().leftの出力値この要素のleft値(その要素の位置決めがrightに設定された場合を含む);("#box").position().topの出力値この要素のtop値(その要素の位置決めがbootomに設定された場合を含む);そして$(「#box」).position().rightと$("#box").position().bottomの出力値はundefinedです.
2.そのleftとtopは、ページ全体ではなく、親要素に対してです.
3.この要素にdisplay:none属性を設定と、$("#box").position()は{"left":-200,"top":-200};$を出力します.("#box").position().leftは-200(要素の位置決めがrightに設定されている場合を含む);$("#box").position().topは-200(要素の位置決めがbootomに設定されている場合を含む)を出力します.そして$(「#box」).position().rightと$("#box").position().bottomの出力値はundefinedのままです.
4.この要素の親要素にdisplay:none属性を設定場合、この要素にdisplay:none属性を設定場合$("#box").position()は{"left":0,"top":0};$を出力します.("#box").position().leftは0を出力します(要素の位置決めがrightに設定されている場合も含まれます)$("#box").position().topは0(要素の位置決めがbootomに設定されている場合を含む)を出力します.そして$(「#box」).position().rightと$("#box").position().bottomの出力値はundefinedのままです.
5.この要素にposition:absolute(またはposition:fixed)を設定、この要素にposition値(またはposition:relative)を設定しない場合、$("#box").position()は{"left":0,"top":0};$を出力します.("#box").position().leftは0を出力します(要素の位置決めがrightに設定されている場合も含まれます)$("#box").position().topは0(要素の位置決めがbootomに設定されている場合を含む)を出力します.そして$(「#box」).position().rightと$("#box").position().bottomの出力値はundefinedのままです.
以上、JQueryのposition()メソッドでは、親要素に対する一致する要素のオフセットを取得できます.返されるオブジェクトには、topとleftの2つの整数属性が含まれます.(現在のビューポートで一致する要素の相対オフセットを取得するには、JQueryのoffset()メソッドを使用します)
position()メソッドは、親要素に対する一致要素の位置(オフセット)を返します.このメソッドで返されるオブジェクトには、topとleftの2つの整数属性があり、ピクセルで計算されます.このメソッドは、表示される要素にのみ有効です.
構文
$(selector).position()
≪インスタンス｜Instance｜emdw≫
要素の現在の位置を取得するには、次の手順に従います.
$(".btn1").click(function(){
x=$("p").position();
$("#span1").text(x.left);
$("#span2").text(x.top);
});
完全な小例
Document
console.log($("#box").position());
console.log($("#box").position().left);
console.log($("#box").position().top);
console.log($("#box").position().right);
console.log($("#box").position().bottom);
方法のまとめ
1.$("#box").position()の出力値はオブジェクトであり、{「left」:xxx、「top」:xxx}(これのように);$("#box").position().leftの出力値この要素のleft値(その要素の位置決めがrightに設定された場合を含む);("#box").position().topの出力値この要素のtop値(その要素の位置決めがbootomに設定された場合を含む);そして$(「#box」).position().rightと$("#box").position().bottomの出力値はundefinedです.
2.そのleftとtopは、ページ全体ではなく、親要素に対してです.
3.この要素にdisplay:none属性を設定と、$("#box").position()は{"left":-200,"top":-200};$を出力します.("#box").position().leftは-200(要素の位置決めがrightに設定されている場合を含む);$("#box").position().topは-200(要素の位置決めがbootomに設定されている場合を含む)を出力します.そして$(「#box」).position().rightと$("#box").position().bottomの出力値はundefinedのままです.
4.この要素の親要素にdisplay:none属性を設定場合、この要素にdisplay:none属性を設定場合$("#box").position()は{"left":0,"top":0};$を出力します.("#box").position().leftは0を出力します(要素の位置決めがrightに設定されている場合も含まれます)$("#box").position().topは0(要素の位置決めがbootomに設定されている場合を含む)を出力します.そして$(「#box」).position().rightと$("#box").position().bottomの出力値はundefinedのままです.
5.この要素にposition:absolute(またはposition:fixed)を設定、この要素にposition値(またはposition:relative)を設定しない場合、$("#box").position()は{"left":0,"top":0};$を出力します.("#box").position().leftは0を出力します(要素の位置決めがrightに設定されている場合も含まれます)$("#box").position().topは0(要素の位置決めがbootomに設定されている場合を含む)を出力します.そして$(「#box」).position().rightと$("#box").position().bottomの出力値はundefinedのままです.
以上、JQueryのposition()メソッドでは、親要素に対する一致する要素のオフセットを取得できます.返されるオブジェクトには、topとleftの2つの整数属性が含まれます.(現在のビューポートで一致する要素の相対オフセットを取得するには、JQueryのoffset()メソッドを使用します)