Bagaimana untuk menukar kedudukan div dengan jquery

Dalam jquery, anda boleh menggunakan kaedah css() dengan atribut margin untuk menukar kedudukan div Kaedah css() digunakan untuk menetapkan atau mengembalikan satu atau lebih atribut gaya elemen yang dipilih. Atribut margin digunakan untuk menetapkan elemen, sintaks ialah "objek div.css(margin: nilai kedudukan berubah;)".

Persekitaran pengendalian tutorial ini: sistem windows10, versi jquery3.2.1, komputer Dell G3.

Cara menukar kedudukan div dalam jquery

Dalam jquery, gaya kedudukan div terutamanya ditetapkan melalui kaedah css() untuk mengubah suai kedudukan div

Buat fail html baharu yang dinamakan test.html, ia digunakan untuk menerangkan jQuery mengubah suai kedudukan DIV secara dinamik. Cipta modul menggunakan tag div untuk menukar kedudukannya secara dinamik menggunakan kaedah jquery di bawah. Tetapkan atribut kelas div kepada mydiv, yang digunakan terutamanya untuk mendapatkan objek div melalui kelas ini di bawah.

Untuk menunjukkan kesan yang jelas, gunakan css untuk menetapkan ketinggian dan lebar div kepada 150px dan sempadan kepada jidar kelabu pepejal 1px. Buat butang menggunakan teg butang, ikat acara onclick pada butang butang, dan laksanakan fungsi edit() apabila butang diklik.

Dalam teg js, cipta fungsi edit() dalam fungsi, dapatkan objek div melalui nama kelas dan gunakan kaedah css() untuk menetapkan margin kiri-kiri dan atas margin atas. untuk mengubah suai lokasi div.

Buka fail test.html dalam penyemak imbas, klik butang untuk melihat kesannya.

Ringkasan:

1.

2. Dalam fail, gunakan teg div untuk mencipta modul dan gunakan teg butang untuk mencipta butang untuk mencetuskan pelaksanaan fungsi js.

3 Buat fungsi dalam tag js Dalam fungsi, dapatkan objek div dan gunakan kaedah css() untuk menetapkan margin kiri-kiri dan atas atas untuk mengubah suai kedudukan div. .

Nota

Kaedah css() menyokong tetapan semua gaya css dipisahkan dengan koma.

Tutorial video berkaitan yang disyorkan: Tutorial video jQuery

Atas ialah kandungan terperinci Bagaimana untuk menukar kedudukan div dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!