js kod pelaksanaan untuk mendapatkan elemen berbanding dengan kemahiran window position_javascript

JS mendapat offsetTop, offsetLeft dan atribut lain elemen

obj.clientWidth //Dapatkan lebar elemen

obj.clientHeight //Ketinggian elemen
obj.offsetLeft //Kiri
elemen berbanding dengan elemen induk obj.offsetTop //Atas
elemen berbanding dengan elemen induk obj.offsetWidth //Lebar elemen
obj.offsetHeight //Ketinggian elemen

Perbezaan:

clientWidth = padding lebar
clientHeight = pelapik ketinggian
offsetWidth = sempadan padding lebar
offsetHeight = sempadan pelapik lebar
Offset adalah lebih daripada lebar jidar

//获取元素的纵坐标（相对于窗口）
function getTop(e){
  var offset=e.offsetTop;
  if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
  return offset;
}
//获取元素的横坐标（相对于窗口）
function getLeft(e){
  var offset=e.offsetLeft;
  if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
  return offset;
}

Saya juga telah menulis artikel tentang mendapatkan kedudukan elemen dalam JS sebelum ini: JS mendapat offsetTop, offsetLeft dan atribut lain elemen Kita boleh mendapatkan kedudukan elemen berbanding tetingkap melalui atribut offsetTop dan offsetLeft , tetapi atribut offsetTop dan offsetLeft adalah relatif kepada Elemen induk diposisikan, dan biasanya elemen yang perlu mendapatkan kedudukan tidak berada di lapisan paling luar, jadi sangat diperlukan untuk melintasi atribut berkaitan offset bagi elemen unggul. Kemudian kecekapan menjadi masalah.

//获取元素的纵坐标（相对于窗口）
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//获取元素的横坐标（相对于窗口）
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}

Nasib baik, penyemak imbas memberikan saya antara muka yang sepadan getBoundingClientRect Kaedah ini mula-mula muncul dalam penyemak imbas IE, dan kemudian penyemak imbas turut menyokong kaedah ini, dan ia lebih lengkap IE hanya boleh mendapatkan atribut elemen kiri, atas, bawah , dan kanan, dan kemudian penyemak imbas moden juga boleh mendapatkan lebar dan

elemen.

Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
1.0	3.0 (1.9)	4.0	(Yes)	4.0

Apa yang perlu diperhatikan di sini ialah bahagian bawah ialah jarak antara bahagian bawah elemen dan bahagian atas tetingkap, bukan bahagian bawah kedudukan dalam CSS berbanding bahagian bawah tetingkap Begitu juga, atribut rihgt ialah jarak antara bahagian paling kanan elemen dan bahagian kiri tetingkap.

var box = document.getElementById("box");
var pos = box.getBoundingClientRect();
box.innerHTML = "top:"+pos.top +
  "left:"+pos.left +
  "bottom:"+pos.bottom +
  "right:"+pos.right +
  "width:"+pos.width +
  "height:"+pos.height

Artikel asal, sila nyatakan semasa mencetak semula: Dicetak semula daripada pembangunan bahagian hadapan