Dapatkan posisi (X, Y) dari elemen HTML

Saya ingin tahu cara mendapatkan posisi X dan Y elemen HTML seperti img dan div di javascript.

853
14 янв. diberikan monaung 14 Jan 2009-01-14 12:35 '09 pada 12:35 2009-01-14 12:35
@ 22 jawaban

Pendekatan yang benar adalah dengan menggunakan element.getBoundingClientRect() :

 var rect = element.getBoundingClientRect(); console.log(rect.top, rect.right, rect.bottom, rect.left); 

Internet Explorer mendukung hal ini, selama Anda mungkin akan menanganinya, dan akhirnya telah distandarisasi dalam Tampilan CSSOM . Semua browser lain sudah lama menerimanya.

Beberapa browser juga mengembalikan properti tinggi dan lebar, meskipun ini tidak standar. Jika Anda khawatir tentang kompatibilitas peramban yang lebih lama, periksa versi jawaban ini untuk penerapan degradasi yang dioptimalkan.

Nilai yang dikembalikan oleh element.getBoundingClientRect() merujuk ke viewport. Jika Anda membutuhkannya relatif terhadap elemen lain, cukup kurangi satu persegi panjang dari yang lain:

 var bodyRect = document.body.getBoundingClientRect(), elemRect = element.getBoundingClientRect(), offset = elemRect.top - bodyRect.top; alert('Element is ' + offset + ' vertical pixels from <body>'); 
1095
09 июля '12 в 17:06 2012-07-09 17:06 jawabannya diberikan oleh Andy E 09 Juli '12 pada 17:06 2012-07-09 17:06

Perpustakaan naik ke panjang tertentu untuk mendapatkan offset yang tepat untuk suatu elemen.
di sini adalah fungsi sederhana yang melakukan pekerjaan dalam keadaan apa pun yang saya coba.

 function getOffset( el ) { var _x = 0; var _y = 0; while( el  !isNaN( el.offsetLeft )  !isNaN( el.offsetTop ) ) { _x += el.offsetLeft - el.scrollLeft; _y += el.offsetTop - el.scrollTop; el = el.offsetParent; } return { top: _y, left: _x }; } var x = getOffset( document.getElementById('yourElId') ).left; 
238
14 янв. jawabannya diberikan oleh meouw 14 Jan 2009-01-14 13:04 '09 pada 13:04 2009-01-14 13:04

Ini bekerja untuk saya (diubah dari jawaban pilihan tertinggi):

 function getOffset(el) { el = el.getBoundingClientRect(); return { left: el.left + window.scrollX, top: el.top + window.scrollY } } 

Dengan ini, kita bisa menelepon

 getOffset(element).left 

atau

 getOffset(element).top 
102
29 янв. jawabannya diberikan oleh Adam Grant 29 Januari. 2015-01-29 21:46 '15 pada 21:46 2015-01-29 21:46

Jika halaman menyertakan - setidaknya "DIV", fungsi yang ditentukan oleh meouw mengembalikan nilai "Y" di luar batas halaman saat ini. Untuk menemukan posisi yang tepat, Anda perlu memproses "offsetParent" dan "parentNode".

Coba kode di bawah ini (diperiksa untuk FF2):

 var getAbsPosition = function(el){ var el2 = el; var curtop = 0; var curleft = 0; if (document.getElementById || document.all) { do { curleft += el.offsetLeft-el.scrollLeft; curtop += el.offsetTop-el.scrollTop; el = el.offsetParent; el2 = el2.parentNode; while (el2 != el) { curleft -= el2.scrollLeft; curtop -= el2.scrollTop; el2 = el2.parentNode; } } while (el.offsetParent); } else if (document.layers) { curtop += el.y; curleft += el.x; } return [curtop, curleft]; }; 
28
12 авг. jawabannya diberikan oleh Refik Ayata 12 Agustus. 2010-08-12 23:14 '10 pada 23:14 2010-08-12 23:14

Anda bisa menambahkan dua properti ke Element.prototype untuk mendapatkan bagian atas / kiri elemen apa pun.

 var x = document.getElementById( 'myDiv' ).documentOffsetLeft; 

Berikut ini adalah perbandingan demo hasil dengan jQuery offset().top dan .left : http://jsfiddle.net/ThinkingStiff/3G7EZ/

26
14 янв. jawabannya diberikan oleh ThinkingStiff 14 Jan 2012-01-14 11:57 '12 pada 11:57 2012-01-14 11:57

Untuk mendapatkan posisi pada halaman secara efisien dan tanpa menggunakan fungsi rekursif: (juga termasuk IE)

 var element = document.getElementById('elementId'); //replace elementId with your element Id. var rect = element.getBoundingClientRect(); var elementLeft,elementTop; //x and y var scrollTop = document.documentElement.scrollTop? document.documentElement.scrollTop:document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft? document.documentElement.scrollLeft:document.body.scrollLeft; elementTop = rect.top+scrollTop; elementLeft = rect.left+scrollLeft; 
20
26 июля '13 в 4:49 2013-07-26 04:49 Jawaban diberikan oleh Abdul Rahim Haddad 26 Juli '13 pada 4:49 2013-07-26 04:49

Elemen HTML di sebagian besar browser akan memiliki: -

 offsetLeft offsetTop 

Mereka menentukan posisi elemen relatif terhadap induk terdekatnya, yang memiliki tata letak. Objek induk ini sering dapat diakses melalui properti offsetParent.

IE dan FF3 miliki

 clientLeft clientTop 

Properti ini kurang umum, mereka menentukan posisi elemen dengan area klien orang tuanya (area yang diisi adalah bagian dari area klien, tetapi batas dan margin tidak).

18
14 янв. Jawaban diberikan oleh AnthonyWJones 14 Jan 2009-01-14 12:43 '09 pada 12:43 2009-01-14 12:43

Mungkin lebih baik jika Anda menggunakan kerangka javascript yang memiliki fungsi untuk mengembalikan informasi tersebut (dan banyak lagi!) Terlepas dari peramban. Berikut ini beberapa di antaranya:

Dalam kerangka ini, Anda dapat melakukan sesuatu seperti: $('id-of-img').top untuk mendapatkan koordinat y-pixel dari gambar.

15
14 янв. jawabannya diberikan scraimer 14 januari . 2009-01-14 12:47 '09 pada 12:47 2009-01-14 12:47

jQuery . offset () akan menerima koordinat saat ini dari elemen pertama atau mengatur koordinat setiap elemen dalam set elemen yang cocok relatif terhadap dokumen.

13
18 авг. balas yang diberikan oleh aliasuppi 18 Agustus. 2010-08-18 17:43 '10 pada 17:43 2010-08-18 17:43

Tentang sesuatu seperti ini, melewati pengidentifikasi elemen, dan itu akan mengembalikan kiri atau atas, kita dapat menggabungkan mereka:

1) temukan kiri

 function findLeft(element) { var rec = document.getElementById(element).getBoundingClientRect(); return rec.left + window.scrollX; } //call it like findLeft('#header'); 

2) cari yang teratas

 function findTop(element) { var rec = document.getElementById(element).getBoundingClientRect(); return rec.top + window.scrollY; } //call it like findTop('#header'); 

atau 3) temukan kiri dan atas bersamaan

 function findTopLeft(element) { var rec = document.getElementById(element).getBoundingClientRect(); return {top: rec.top + window.scrollY, left: rec.left + window.scrollX}; } //call it like findTopLeft('#header'); 
11
22 мая '17 в 16:09 2017-05-22 16:09 Jawaban diberikan oleh Alireza pada 22 Mei 17 di 4:09 2017-05-05 16:09

Saya menerima respons @meouw yang ditambahkan ke clientLeft, yang memungkinkan penggunaan perbatasan, dan kemudian membuat tiga versi:

getAbsoluteOffsetFromBody - mirip dengan @meouw, ia mendapat posisi absolut relatif terhadap elemen tubuh atau html dokumen (tergantung pada mode quirks)

getAbsoluteOffsetFromGivenElement - mengembalikan posisi absolut relatif terhadap elemen yang diberikan (relatifEl). Perhatikan bahwa elemen ini harus mengandung elemen el, jika tidak maka akan berperilaku dengan cara yang sama dengan getAbsoluteOffsetFromBody. Ini berguna jika Anda memiliki dua elemen yang terkandung dalam elemen (dikenal) lainnya (tidak harus beberapa node di atas simpul pohon) dan ingin membuatnya sama.

getAbsoluteOffsetFromRelative - mengembalikan posisi absolut relatif ke elemen induk pertama dengan posisi: relatif. Ini mirip dengan getAbsoluteOffsetFromGivenElement untuk alasan yang sama, tetapi hanya sampai elemen pencocokan pertama.

 getAbsoluteOffsetFromBody = function( el ) { // finds the offset of el from the body or html element var _x = 0; var _y = 0; while( el  !isNaN( el.offsetLeft )  !isNaN( el.offsetTop ) ) { _x += el.offsetLeft - el.scrollLeft + el.clientLeft; _y += el.offsetTop - el.scrollTop + el.clientTop; el = el.offsetParent; } return { top: _y, left: _x }; } getAbsoluteOffsetFromGivenElement = function( el, relativeEl ) { // finds the offset of el from relativeEl var _x = 0; var _y = 0; while( el  el != relativeEl  !isNaN( el.offsetLeft )  !isNaN( el.offsetTop ) ) { _x += el.offsetLeft - el.scrollLeft + el.clientLeft; _y += el.offsetTop - el.scrollTop + el.clientTop; el = el.offsetParent; } return { top: _y, left: _x }; } getAbsoluteOffsetFromRelative = function( el ) { // finds the offset of el from the first parent with position: relative var _x = 0; var _y = 0; while( el  !isNaN( el.offsetLeft )  !isNaN( el.offsetTop ) ) { _x += el.offsetLeft - el.scrollLeft + el.clientLeft; _y += el.offsetTop - el.scrollTop + el.clientTop; el = el.offsetParent; if (el != null) { if (getComputedStyle !== 'undefined') valString = getComputedStyle(el, null).getPropertyValue('position'); else valString = el.currentStyle['position']; if (valString === "relative") el = null; } } return { top: _y, left: _x }; } 

Jika Anda masih memiliki masalah, terutama masalah yang berkaitan dengan pengguliran, Anda dapat mencoba http://www.greywyvern.com/?post=331 - Saya perhatikan setidaknya satu kode getStyle yang meragukan yang seharusnya bagus jika browser akan berperilaku, tetapi tidak memeriksa yang lainnya.

7
01 дек. Balas diberikan oleh James Carlyle-Clarke 01 Des 2015-12-01 10:24 '15 jam 10:24 2015-12-01 10:24

jika Anda menggunakan jQuery, plugin ukurannya bagus dan memungkinkan Anda menentukan dengan tepat apa yang Anda inginkan.

misalnya.

Posisi relatif, posisi absolut, posisi absolut tanpa mengisi, dengan ...

Ayo, anggap saja Anda bisa melakukan banyak hal dengannya.

Selain itu, bonus penggunaan jQuery adalah ukuran file yang mudah dan kemudahan penggunaan, setelah itu Anda tidak akan kembali ke JavaScript tanpanya.

7
14 янв. balasan yang diberikan oleh John_ Jan 14 2009-01-14 13:24 '09 pada 13:24 2009-01-14 13:24

Ini adalah kode terbaik yang berhasil saya buat (berfungsi di iframe, berbeda dengan jQuery offset ()). Tampaknya webkit memiliki perilaku yang sedikit berbeda.

Berdasarkan komentar meouw:

 function getOffset( el ) { var _x = 0; var _y = 0; while( el  !isNaN( el.offsetLeft )  !isNaN( el.offsetTop ) ) { _x += el.offsetLeft - el.scrollLeft; _y += el.offsetTop - el.scrollTop; // chrome/safari if ($.browser.webkit) { el = el.parentNode; } else { // firefox/IE el = el.offsetParent; } } return { top: _y, left: _x }; } 
6
10 сент. Balas Ron Reiter 10 Sep 2011-09-10 20:05 '11 pada 20:05 2011-09-10 20:05

Jika Anda menggunakan jQuery, ini bisa menjadi solusi sederhana:

 <script> var el = $("#element"); var position = el.position(); console.log( "left: " + position.left + ", top: " + position.top ); </script> 
6
16 апр. Balas diberikan oleh iMad pada 16 April 2013-04-16 07:56 '13 pada 7:56 2013-04-16 07:56

Pendekatan terbersih yang saya temukan adalah versi sederhana dari metode yang digunakan oleh jQuery offset . Seperti beberapa jawaban lain, itu dimulai dengan getBoundingClientRect ; kemudian menggunakan window dan documentElement untuk mengatur posisi gulir, serta hal-hal seperti margin pada body (sering secara default).

 var rect = el.getBoundingClientRect(); var docEl = document.documentElement; var rectTop = rect.top + window.pageYOffset - docEl.clientTop; var rectLeft = rect.left + window.pageXOffset - docEl.clientLeft; 

 div { width: 100px; height: 100px; background-color: red; border: 1px solid black; } #rel { position: relative; left: 10px; top: 10px; } #abs { position: absolute; top: 250px; left: 250px; } 
4
04 нояб. Jawaban diberikan oleh James Montagne pada 04 November 2014-11-04 17:17 '14 pada 17:17 2014-11-04 17:17

Perbedaan antara kecil dan kecil

 function getPosition( el ) { var x = 0; var y = 0; while( el  !isNaN( el.offsetLeft )  !isNaN( el.offsetTop ) ) { x += el.offsetLeft - el.scrollLeft; y += el.offsetTop - el.scrollTop; el = el.offsetParent; } return { top: y, left: x }; } 

Lihat contoh koordinat: http://javascript.info/tutorial/coordinates

4
25 авг. jawabannya diberikan KingRider 25 Agustus. 2016-08-25 18:44 '16 pada 18:44 2016-08-25 18:44

Saya membuatnya sehingga lintas-kompatibel dengan browser lama.

 // For really old browser or incompatible ones function getOffsetSum(elem) { var top = 0, left = 0, bottom = 0, right = 0 var width = elem.offsetWidth; var height = elem.offsetHeight; while (elem) { top += elem.offsetTop; left += elem.offsetLeft; elem = elem.offsetParent; } right = left + width; bottom = top + height; return { top: top, left: left, bottom: bottom, right: right, } } function getOffsetRect(elem) { var box = elem.getBoundingClientRect(); var body = document.body; var docElem = document.documentElement; var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop; var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft; var clientTop = docElem.clientTop; var clientLeft = docElem.clientLeft; var top = box.top + scrollTop - clientTop; var left = box.left + scrollLeft - clientLeft; var bottom = top + (box.bottom - box.top); var right = left + (box.right - box.left); return { top: Math.round(top), left: Math.round(left), bottom: Math.round(bottom), right: Math.round(right), } } function getOffset(elem) { if (elem) { if (elem.getBoundingClientRect) { return getOffsetRect(elem); } else { // old browser return getOffsetSum(elem); } } else return null; } 

Baca lebih lanjut tentang koordinat dalam JavaScript di sini: http://javascript.info/tutorial/coordinates

3
15 марта '15 в 15:11 2015-03-15 15:11 Jawaban diberikan oleh Bojan Kseneman pada 15 Maret '15 di 15:11 2015-03-15 15:11

Kupikir aku akan membuangnya juga.
Saya tidak bisa memeriksanya di browser lama, tetapi berfungsi di versi terbaru 3. :)

 Element.prototype.getOffsetTop = function() { return ( this.parentElement )? this.offsetTop + this.parentElement.getOffsetTop(): this.offsetTop; }; Element.prototype.getOffsetLeft = function() { return ( this.parentElement )? this.offsetLeft + this.parentElement.getOffsetLeft(): this.offsetLeft; }; Element.prototype.getOffset = function() { return {'left':this.getOffsetLeft(),'top':this.getOffsetTop()}; }; 
2
12 окт. Jawab Duncan 12 Okt 2014-10-12 13:57 '14 pada 13:57 2014-10-12 13:57

Saya telah berhasil menggunakan solusi Andy E untuk menempatkan bootstrap 2 tergantung pada tautan mana di baris tabel yang diklik pengguna. Halaman ini adalah halaman Tapestry 5, dan javascript di bawah ini diimpor ke kelas halaman java.

Javascript:

 function setLinkPosition(clientId){ var bodyRect = document.body.getBoundingClientRect(), elemRect = clientId.getBoundingClientRect(), offset = elemRect.top - bodyRect.top; offset = offset + 20; $('#serviceLineModal').css("top", offset); 

}

Kode modal saya:

 <div id="serviceLineModal" class="modal hide fade add-absolute-position" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top:50%;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> <t:zone t:id="modalZone" id="modalZone"> <p>You selected service line number: ${serviceLineNumberSelected}</p> </t:zone> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <!-- <button class="btn btn-primary">Save changes</button> --> </div> 

Tautan di loop:

 <t:loop source="servicesToDisplay" value="service" encoder="encoder"> <tr style="border-right: 1px solid black;"> <td style="white-space:nowrap;" class="add-padding-left-and-right no-border"> <at:type="eventLink" t:event="serviceLineNumberSelected" t:context="service.serviceLineNumber" t:zone="pageZone" t:clientId="modalLink${service.serviceLineNumber}" onmouseover="setLinkPosition(this);"> <i class="icon-chevron-down"></i> <!-- ${service.serviceLineNumber} --> </a> </td> 

Dan kode Java di kelas halaman:

 void onServiceLineNumberSelected(String number){ checkForNullSession(); serviceLineNumberSelected = number; addOpenServiceLineDialogCommand(); ajaxResponseRenderer.addRender(modalZone); } protected void addOpenServiceLineDialogCommand() { ajaxResponseRenderer.addCallback(new JavaScriptCallback() { @Override public void run(JavaScriptSupport javascriptSupport) { javascriptSupport.addScript("$('#serviceLineModal').modal('show');"); } }); } 

Semoga ini bisa membantu seseorang, postingan ini bisa membantu.

2
23 окт. Balasan yang diberikan oleh Mark Espinoza pada 23 Okt 2014-10-23 18:02 '14 pada 18:02 2014-10-23 18:02

Setelah banyak penelitian dan pengujian, ini tampaknya berhasil.

 function getPosition(e) { var isNotFirefox = (navigator.userAgent.toLowerCase().indexOf('firefox') == -1); var x = 0, y = 0; while (e) { x += e.offsetLeft - e.scrollLeft + (isNotFirefox ? e.clientLeft : 0); y += e.offsetTop - e.scrollTop + (isNotFirefox ? e.clientTop : 0); e = e.offsetParent; } return { x: x + window.scrollX, y: y + window.scrollY }; } 

lihat http://jsbin.com/xuvovalifo/edit?html,js,output

1
17 июня '15 в 23:48 2015-06-17 23:48 jawabannya diberikan kernowcode 17 Juni '15 di 23:48 2015-06-17 23:48

Karena browser yang berbeda adalah visualisasi batas, indentasi, margin, dll. berbeda. Saya menulis fungsi kecil untuk mendapatkan posisi atas dan kiri dari elemen tertentu di setiap elemen root yang Anda inginkan dalam ukuran yang tepat:

 function getTop(root, offset) { var rootRect = root.getBoundingClientRect(); var offsetRect = offset.getBoundingClientRect(); return offsetRect.top - rootRect.top; } 

Untuk mendapatkan posisi kiri, Anda harus kembali:

  return offsetRect.left - rootRect.left; 
0
08 янв. jawabannya diberikan samadadi 08 Jan 2015-01-08 20:42 '15 pada 20:42 2015-01-08 20:42

Meskipun kemungkinan besar akan hi> Sejauh yang saya tahu, tidak ada jawaban lain yang akan membantu.

<B> Situasi:
Pada halaman HTML5, saya memiliki menu yang merupakan elemen navigasi di dalam judul (bukan judul, tetapi judul di elemen lain).
Saya ingin sistem navigasi tetap di atas segera setelah pengguna menggulirnya, tetapi sebelum itu judulnya benar-benar diposisikan (sehingga saya bisa memaksakan sesuatu yang lain sedikit).
Solusi di atas tidak pernah menyebabkan perubahan, karena .offsetTop tidak akan berubah, karena itu adalah elemen dengan penentuan posisi absolut. Selain itu, properti .scrollTop hanya bagian atas elemen atas ..., yaitu, 0 dan akan selalu ada 0.
Setiap tes yang saya lakukan menggunakan kedua (dan sama dengan hasil getBoundingClientRect) tidak akan memberi tahu saya bahwa bagian atas bilah navigasi pernah digulir ke bagian atas halaman yang Anda lihat (lagi, seperti yang dilaporkan pada konsol, mereka hanya tetap nomor yang sama ketika bergulir terjadi).

Solusi
Solusi buat saya dulu

 window.visualViewport.pageTop 

Nilai properti pageTop mencerminkan bagian layar yang terlihat, sehingga memungkinkan Anda untuk melacak di mana elemen tersebut berada di perbatasan area tampilan.

Mungkin tidak perlu mengatakan bahwa kapan saja ketika saya terlibat dalam pengguliran, saya berharap untuk menggunakan solusi ini untuk merespons secara terprogram terhadap pergerakan elemen yang dapat digulir.
Semoga ini bisa membantu orang lain.

0
24 окт. jawabannya diberikan MER 24 Oktober. 2017-10-24 22:23 '17 pada 10:23 malam 2017-10-24 22:23

Pertanyaan lain tentang tag atau Ajukan Pertanyaan