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
Top comments (0)