Bagaimana untuk melaksanakan kedudukan relatif dalam jquery (tiga kaedah)

Kedudukan relatif ialah kaedah penentududukan CSS biasa, yang boleh diposisikan secara relatif kepada kedudukan asal elemen itu sendiri. Walau bagaimanapun, kedudukan relatif juga boleh dicapai dalam DOM dengan jQuery. Artikel ini akan memperkenalkan cara melaksanakan kedudukan relatif dalam jQuery.

1. Gunakan kaedah .position()

Dalam jQuery, anda boleh menggunakan kaedah .position() untuk menetapkan kedudukan relatif sesuatu elemen. Kaedah ini mengembalikan anjakan relatif kepada elemen induk dan ruang pandang elemen, dan kedudukan relatif boleh dilakukan atas dasar ini.

Sebagai contoh, kod berikut menggunakan kaedah .position() untuk meletakkan elemen 50 piksel di bawah kedudukan asalnya:

$(document).ready(function(){
    $("button").click(function(){
        $("div").position({
            my: "left top",
            at: "left+50 bottom",
            of: $(this)
        });
    });
});

Pertama, selepas dokumen dimuatkan, Peristiwa adalah dicetuskan apabila butang diklik. Seterusnya, kami menentukan kedudukan awal elemen sebagai sudut kiri atas elemen induk melalui .position("kiri atas"), dan kemudian nyatakan elemen untuk mengalihkan 50 piksel ke kiri melalui .at("left+50 bottom ") dan betulkan di Bawah, akhirnya .of($(this)) bermaksud meletakkan elemen yang agak berkedudukan relatif kepada kedudukan butang, dan bukannya relatif kepada elemen induk elemen.

2 Gunakan kaedah .offset()

kaedah .offset() jQuery boleh mendapatkan atau menetapkan offset elemen berbanding dokumen dan anda juga boleh menggunakannya untuk mencapai relatif kedudukan .

Sebagai contoh, kod berikut menggunakan kaedah .offset() untuk meletakkan elemen 50 piksel di bawah kedudukan awalnya:

$(document).ready(function(){
    $("button").click(function(){
        var pos = $("div").offset();
        pos.top=pos.top+50;
        $("div").offset(pos);
    });
});

Begitu juga, selepas dokumen dimuatkan, Peristiwa adalah dicetuskan apabila butang diklik. Seterusnya, kami menggunakan kaedah .offset() untuk mendapatkan kedudukan elemen, kemudian gerakkannya ke bawah 50 piksel dengan mengubah suai atribut .top elemen, dan akhirnya menetapkan semula kedudukan yang diubah suai melalui kaedah .offset().

3 Gunakan kaedah .css()

Selain kaedah .position() dan kaedah .offset(), anda juga boleh menggunakan kaedah .css() untuk mencapai kedudukan relatif. Kaedah ini membolehkan anda mengubah suai secara langsung sifat CSS elemen, seperti atas, kiri, dsb.

Sebagai contoh, kod berikut menggunakan kaedah .css() untuk membetulkan elemen 100 piksel di bawah kedudukan asalnya:

$(document).ready(function(){
    $("button").click(function(){
        $("div").css({
            position: "relative",
            top: "100px"
        });
    });
});

Apabila butang diklik, melalui .css( ) kaedah menetapkan kedudukan relatif elemen kepada relatif, dan kemudian menetapkan nilai atribut .top kepada 100px, supaya elemen berada pada kedudukan relatif 100 piksel di bawah kedudukan asalnya.

Ringkasan

Di atas adalah tiga kaedah untuk mencapai kedudukan relatif dalam jQuery Setiap kaedah mempunyai senario yang berkenaan:

kaedah.position() sesuai untuk situasi di mana anda perlu. pertimbangkan Kedudukan relatif elemen induk elemen dan kedudukan port pandang. Kaedah

.offset() sesuai untuk kedudukan relatif yang memerlukan mengambil kira kedudukan elemen berbanding dokumen. Kaedah

.css() sesuai untuk menukar kedudukan relatif nilai sifat CSS sesuatu elemen.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kedudukan relatif dalam jquery (tiga kaedah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!