Bagaimana Cara Mendapatkan Posisi Elemen HTML Tertentu di JavaScript?

Dibuat
·
Dilihat11 kali
0

Apakah ada cara untuk mengetahui posisi elemen (x,y) HTML tertentu di JavaScript? ini kode yang saya pakai:

<p id="target">Cari posisi (x,y) elemen ini</p>
<button id="btn">Click</button>
<p id="result"></p>

Saya ingin mendapatkan posisi elemen yang memiliki id target, posisi elemen harus dihitung ketika tombol dengan id btn di klik, hasilnya harus menjadi konten (berada di tengah) elemen dengan id result.

JavaScriptHTML
1 Jawaban
0

Bisa pakai fungsi getBoundingClientRect() yang disematkan pada elemen yang ingin dicari posisinya, fungsi ini mengembalikan properti left (x) dan top (y), kemudian jumlahkan dengan window.scrollX dan window.scrollY untuk menghitung jarak scroll.

Seperti ini:

<p id="target">Cari posisi (x,y) elemen ini</p>
<button id="btn">Click</button>
<p id="result"></p>

<script>
  const getOffset = (element) => {
    const elementRect = element.getBoundingClientRect();
    return {
      x: elementRect.left + window.scrollX,
      y: elementRect.top + window.scrollY
    }
  }

  const btn = document.getElementById("btn");

  btn.addEventListener('click', () => {
    const target = document.getElementById("target");
	  const result = document.getElementById("result");

    const offset = getOffset(target);
    result.innerText = `(${offset.x}, ${offset.y})`;
  })
</script>
Dibuat

Kamu tau jawabannya?

Ayo bergabung bersama lebih dari 200.000 pengguna lainnya!

Pertanyaan Terkait