Pertanyaan Ambil posisi (X, Y) dari elemen HTML


Saya ingin tahu bagaimana mendapatkan posisi X dan Y elemen HTML seperti img dan div di JavaScript.


1007
2018-01-14 09:35


asal


Jawaban:


Pendekatan yang benar adalah menggunakan element.getBoundingClientRect():

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

Internet Explorer telah mendukung ini karena selama Anda mungkin peduli dan itu akhirnya standar masuk Tampilan CSSOM. Semua browser lain mengadopsinya dahulu kala.

Beberapa browser juga mengembalikan properti tinggi dan lebar, meskipun ini tidak standar. Jika Anda khawatir tentang kompatibilitas browser yang lebih tua, periksa revisi jawaban ini untuk implementasi yang mendegradasi yang dioptimalkan.

Nilai dikembalikan oleh element.getBoundingClientRect() relatif terhadap 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>');

1303
2017-07-09 14:06



Perpustakaan pergi ke beberapa panjang untuk mendapatkan offset akurat untuk suatu elemen.
inilah fungsi sederhana yang melakukan pekerjaan dalam setiap keadaan 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; 

256
2018-01-14 10:04



Ini berhasil bagi saya (dimodifikasi dari jawaban tertinggi):

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

Menggunakan ini kita bisa memanggil

getOffset(element).left

atau

getOffset(element).top

137
2018-01-29 18:46



Jika halaman termasuk - setidaknya- "DIV" apa pun, fungsi yang diberikan oleh saya akan melempar nilai "Y" di luar batas halaman saat ini. Untuk menemukan posisi yang tepat, Anda perlu menangani "offsetParent" dan "parentNode".

Coba kode yang diberikan di bawah ini (sudah 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];
};


29
2017-08-12 20:14



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

Object.defineProperty( Element.prototype, 'documentOffsetTop', {
    get: function () { 
        return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 );
    }
} );

Object.defineProperty( Element.prototype, 'documentOffsetLeft', {
    get: function () { 
        return this.offsetLeft + ( this.offsetParent ? this.offsetParent.documentOffsetLeft : 0 );
    }
} );

Ini disebut seperti ini:

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

Berikut adalah demo yang membandingkan hasilnya dengan jQuery offset().top dan .left: http://jsfiddle.net/ThinkingStiff/3G7EZ/


28
2018-01-14 08:57



Elemen HTML di sebagian besar browser akan memiliki: -

offsetLeft
offsetTop

Ini menentukan posisi elemen relatif induk terdekatnya yang memiliki tata letak. Orang tua ini sering dapat diakses bif properti offsetParent.

IE dan FF3 punya

clientLeft
clientTop

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


25
2018-01-14 09:43



Untuk mengambil posisi relatif ke halaman secara efisien, dan tanpa menggunakan fungsi rekursif: (termasuk IE juga)

var element = document.getElementById('elementId'); //replace elementId with your element's 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;

21
2017-07-26 01:49



Bagaimana dengan hal seperti ini, dengan melewatkan ID elemen dan akan mengembalikan bagian kiri atau atas, kita juga bisa menggabungkannya:

1) temukan kiri

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

2) temukan top

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 bersama

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');

18
2018-05-22 13:09



Anda mungkin lebih baik dilayani dengan menggunakan kerangka JavaScript, yang memiliki fungsi untuk mengembalikan informasi tersebut (dan banyak lagi!) Dalam mode browser-independen. Berikut beberapa di antaranya:

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


17
2018-01-14 09:47



jQuery .mengimbangi() akan mendapatkan koordinat saat ini dari elemen pertama, atau mengatur koordinat setiap elemen, di set elemen yang cocok, relatif terhadap dokumen.


14
2017-08-18 14:43



jika menggunakan jQuery, plugin dimensisangat baik dan memungkinkan Anda menentukan apa yang Anda inginkan.

misalnya

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

Ini terus, katakan saja ada banyak yang bisa Anda lakukan dengan itu.

Plus bonus menggunakan jQuery adalah ukuran file yang ringan dan mudah digunakan, Anda tidak akan kembali ke JavaScript tanpa itu sesudahnya.


8
2018-01-14 10:24