Rumah > hujung hadapan web > tutorial js > js kod pelaksanaan untuk mendapatkan elemen berbanding dengan kemahiran window position_javascript

js kod pelaksanaan untuk mendapatkan elemen berbanding dengan kemahiran window position_javascript

WBOY
Lepaskan: 2016-05-16 16:35:03
asal
1233 orang telah melayarinya

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;
}
Salin selepas log masuk

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;
}
Salin selepas log masuk

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
Salin selepas log masuk

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan