DEV Community

ahoNerd
ahoNerd

Posted on • Originally published at ahonerd.com

Get Absolute Position of Element

Cara untuk mendapatkan posisi absolut dari suatu HTML element terhadap browser windows.

Explanation

Untuk mengetahui posisi serta ukuran lebar dan tinggi dari suatu element, kita dapat menggunakan getBoundingClientRect().

Sebagai contoh kita akan coba metode ini pada element acak sebagai berikut:

console.log(document.getElementById('aho').getBoundingClientRect());
Enter fullscreen mode Exit fullscreen mode

Akan menghasilkan output kurang lebih sebagai berikut:

{
  "x": 950,
  "y": 298.78125,
  "width": 320,
  "height": 1490.390625,
  "top": 298.78125,
  "right": 1270,
  "bottom": 1789.171875,
  "left": 950
}
Enter fullscreen mode Exit fullscreen mode

sehingga misalnya untuk mengetahui lebar element cukup menggunakan:

console.log(document.getElementById('aho').getBoundingClientRect().width);
Enter fullscreen mode Exit fullscreen mode

CodePen

Use Case

Top comments (0)