Bagaimana untuk mendapatkan dan menetapkan kedudukan elemen dalam jquery

Jquery ialah perpustakaan JavaScript yang sangat popular. Salah satu fungsi yang sangat penting ialah memanipulasi elemen pada halaman. Dalam pembangunan web, kita sering perlu mendapatkan dan menetapkan kedudukan elemen, yang merupakan fungsi yang sangat penting. Artikel ini akan memperkenalkan cara menggunakan Jquery untuk mendapatkan dan menetapkan kedudukan elemen.

1. Dapatkan kedudukan elemen

1. kaedah offset()

kaedah offset() mengembalikan kedudukan elemen berbanding sudut kiri atas halaman tersebut. Kodnya adalah seperti berikut:

$(document).ready(function(){
  var offset = $("#box").offset();
  console.log(offset.left);
  console.log(offset.top);
});

2. kaedah position()

kaedah position() mengembalikan kedudukan elemen berbanding sudut kiri atas induknya unsur. Kodnya adalah seperti berikut:

$(document).ready(function(){
  var position = $("#box").position();
  console.log(position.left);
  console.log(position.top);
});

3. kaedah scrollTop()

kaedah scrollTop() mengembalikan jarak menegak penatal halaman semasa. Kodnya adalah seperti berikut:

$(document).ready(function(){
  var scrollTop = $(window).scrollTop();
  console.log(scrollTop);
});

2. Tetapkan kedudukan elemen

1. kaedah offset()

kaedah offset() boleh menetapkan elemen berbanding bahagian atas sebelah kiri kedudukan sudut halaman. Kodnya adalah seperti berikut:

$(document).ready(function(){
  $("#box").offset({left:100, top:200});
});

2. kaedah css()

kaedah css() boleh menetapkan sifat CSS bagi elemen. Sebagai contoh, anda boleh menetapkan sifat kiri dan atas elemen untuk menukar kedudukannya. Kod tersebut adalah seperti berikut:

$(document).ready(function(){
  $("#box").css({left:100, top:200});
});

3. kaedah animate()

kaedah animate() boleh menukar kedudukan elemen dengan lancar dalam satu tempoh masa. Kodnya adalah seperti berikut:

$(document).ready(function(){
  $("#box").animate({left:100, top:200}, 1000);
});

Artikel ini menerangkan cara menggunakan Jquery untuk mendapatkan dan menetapkan kedudukan elemen. Kaedah ini sangat berguna dan boleh membantu kami melaksanakan reka letak halaman yang kompleks. Semoga artikel ini bermanfaat kepada anda.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan dan menetapkan kedudukan elemen dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!