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

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
}

sehingga misalnya untuk mengetahui lebar element cukup menggunakan:

console.log(document.getElementById('aho').getBoundingClientRect().width);

CodePen

Use Case