Ringkasan kaedah js untuk mendapatkan offset elemen pada kemahiran page_javascript

Apabila menggunakan js untuk mencipta kesan, kita selalunya perlu mendapatkan offset elemen pada halaman (seperti fungsi kotak gesaan tip). Untuk mendapatkan offset, anda boleh terus mendapatkan offset relatif kepada dokumen, atau anda boleh mendapatkan offset relatif kepada viewport (titik pandangan) ditambah jumlah tatal halaman (scroll).

1 Dapatkan pengimbangan relatif kepada dokumen

function getOffsetSum(ele){
  var top= 0,left=0;
  while(ele){
    top+=ele.offsetTop;
    left+=ele.offsetLeft;
    ele=ele.offsetParent;
  }
  return {
    top:top,
    left:left
  }
}

Dengan melelaran offsetParent ke atas, offset relatif kepada dokumen boleh dikira, iaitu, offset relatif kepada halaman.

Masalah dengan kaedah ini:

1) Untuk halaman yang menggunakan susun atur bingkai jadual dan sebaris, disebabkan perbezaan dalam cara pelayar berbeza melaksanakan elemen, hasil yang diperoleh adalah tidak tepat.

2) Setiap kali anda perlu mencari offsetParent satu peringkat pada satu masa, kecekapan adalah terlalu rendah.

2. Dapatkan offset relatif kepada viewport (titik pandangan) ditambah jumlah tatal (scroll) halaman

function getOffsetRect(ele){
      var box=ele.getBoundingClientRect();
      var body=document.body,
        docElem=document.documentElement;
      //获取页面的scrollTop,scrollLeft(兼容性写法)
      var scrollTop=window.pageYOffset||docElem.scrollTop||body.scrollTop,
        scrollLeft=window.pageXOffset||docElem.scrollLeft||body.scrollLeft;
      var clientTop=docElem.clientTop||body.clientTop,
        clientLeft=docElem.clientLeft||body.clientLeft;
      var top=box.top+scrollTop-clientTop,
        left=box.left+scrollLeft-clientLeft;
      return {
        //Math.round 兼容火狐浏览器bug
        top:Math.round(top),
        left:Math.round(left)
      }
    }

Kaedah ini secara langsung mendapatkan offset relatif kepada viewport melalui kaedah getBoundingClientRect(), ditambah jumlah tatal halaman, tolak clientTop, clientLeft (IE8 dan penyemak imbas bawah menggunakan (2,2) sebagai koordinat titik permulaan , jadi anda perlu menolak koordinat titik permulaan daripada nilai Pelayar lain menggunakan (0,0) sebagai koordinat titik permulaan).

Kaedah getBoundingClientRect() menyokong IE, ff3, safari4, Orear9,5, Chrome.

3. Penulisan keserasian

//获取元素相对于页面的偏移
function getOffset(ele){
  if(ele.getBoundingClientRect){
    return getOffsetRect(ele);
  }else{
    return getOffsetSum(ele);
  }
}

Untuk penyemak imbas yang menyokong kaedah getBoundingClientRect(), gunakan kaedah getOffsetRect() dan untuk penyemak imbas yang tidak menyokongnya, gunakan kaedah getOffsetSum().

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang yang belajar javascript.