`getBoundingClientRect / elementFromPoint` în JavaScript

Returnează poziția și mărimea unui element pe ecran; elementFromPoint face invers, din coordonate în element.

Sintaxă

element.getBoundingClientRect()
element.getClientRects()
document.elementFromPoint(x, y)

Ce face `getBoundingClientRect / elementFromPoint`

getBoundingClientRect() returnează un dreptunghi cu x, y, width, height, top, right, bottom, left, în pixeli, față de colțul din stânga sus al ferestrei vizibile (nu al paginii). Pentru poziția în pagină adaugă window.scrollY.

getClientRects() returnează câte un dreptunghi pentru fiecare rând al unui element de text care se întinde pe mai multe rânduri. document.elementFromPoint(x, y) returnează elementul de deasupra aflat la acele coordonate.

Ce returnează

Un obiect DOMRect (sau o listă, la getClientRects); elementFromPoint returnează un element sau null.

Exemple

Exemplul 1: Poziția unui buton și verificarea vizibilității

Rezultatul pentru o pagină derulată cu 800 de pixeli.

const buton = document.querySelector("#cumpara");
const r = buton.getBoundingClientRect();

console.log(Math.round(r.top), Math.round(r.left), r.width, r.height);
console.log(r.top + window.scrollY);
const vizibil = r.top < window.innerHeight && r.bottom > 0;
console.log(vizibil);
console.log(document.elementFromPoint(r.left + 5, r.top + 5) === buton);

Rezultat în browser

412 32 160 44
1212
true
true

Exemplul 2: Un link pe două rânduri

const link = document.querySelector("p a");
console.log(link.getClientRects().length);