Element.
Zwraca rozmiar elementu i jego położenie względem widocznego obszaru okna w postaci obiektu DOMRect.
- Zwraca
- Obiekt
DOMRectz właściwościamix,y,width,height,top,right,bottomileft(w pikselach CSS).
Przykład
#const card = document.querySelector('#card')
requestAnimationFrame(() => {
const rect = card.getBoundingClientRect()
console.log(Math.round(rect.width), Math.round(rect.height))
console.log(Math.round(rect.left), Math.round(rect.top))
console.log(Math.round(rect.right), Math.round(rect.bottom))
})Szerokość obejmuje dopełnienie i ramkę, bo w podglądzie elementy mają box-sizing: border-box. left równe 36 to 16 px odstępu strony i 20 px marginesu karty, a right to zawsze left + width. Pomiar czeka na pierwszą klatkę (requestAnimationFrame()), bo ramka z przykładem dostaje swój rozmiar chwilę po starcie skryptu. Na zwykłej, wyświetlonej już stronie możesz mierzyć od razu.
Definicja i zastosowanie
#Metoda getBoundingClientRect() mierzy element tak, jak widać go na ekranie. Zwraca obiekt DOMRect z właściwościami width i height (rozmiar) oraz top, right, bottom i left (położenie krawędzi). Są też x i y, które dla elementów równają się left i top.
Położenie jest liczone względem widocznego obszaru okna (viewportu), a nie początku dokumentu. Gdy przewiniesz stronę w dół, top elementu maleje, a dla elementów powyżej ekranu staje się ujemne. Położenie względem całej strony dostaniesz, dodając przewinięcie: rect.top + window.scrollY. Te same współrzędne przyjmuje position: fixed, więc łatwo ustawić obok elementu np. dymek z podpowiedzią.
Rozmiar obejmuje dopełnienie (padding) i ramkę, czyli całe pole zajmowane przez element. Uwzględnia też przekształcenia CSS: transform: scale(2) podwaja zwracaną szerokość. Wartości bywają ułamkowe, np. przy powiększeniu strony, dlatego przed porównaniem warto je zaokrąglić. Odczyt może też zmusić przeglądarkę do natychmiastowego przeliczenia układu strony, jeśli wcześniej zmieniły się style.
Składnia
#element.getBoundingClientRect()Więcej przykładów
#const badge = document.querySelector('#badge')
requestAnimationFrame(() => {
console.log(badge.offsetWidth)
console.log(Math.round(badge.getBoundingClientRect().width))
})offsetWidth podaje szerokość z układu strony i pomija transform. getBoundingClientRect() mierzy element po powiększeniu, czyli tak, jak widać go na ekranie.
const help = document.querySelector('#help')
const tooltip = document.querySelector('#tooltip')
help.addEventListener('click', () => {
const rect = help.getBoundingClientRect()
tooltip.style.left = `${Math.round(rect.left)}px`
tooltip.style.top = `${Math.round(rect.bottom + 8)}px`
tooltip.hidden = false
console.log(tooltip.style.left, tooltip.style.top)
})
requestAnimationFrame(() => help.click())Współrzędne z getBoundingClientRect() i z position: fixed liczone są od tego samego punktu, czyli lewego górnego rogu widocznego obszaru. Dymek trafia więc 8 px pod dolną krawędź przycisku. Kliknięcie symulujemy w pierwszej klatce, gdy ramka podglądu ma już swój rozmiar.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Współrzędne zmieniają się przy przewijaniu, bo są liczone od widocznego obszaru okna. Położenie na stronie to
rect.top + window.scrollY. - Zaokrąglaj wyniki przez
Math.round(), zanim je porównasz albo wyświetlisz. Przy powiększeniu strony wartości bywają ułamkowe. - Element ukryty przez
display: nonealbo jeszcze niewstawiony do dokumentu ma wszystkie wymiary równe 0. Mierz go dopiero wtedy, gdy jest wyświetlony.
Powiązane hasła
#- Element.scrollIntoView()Przewija stronę i przewijane kontenery tak, żeby element pojawił się na ekranie, skokiem albo płynnie.
- IntersectionObserverObserwuje, czy element jest widoczny w oknie albo w przewijanym kontenerze, i wywołuje funkcję, gdy to się zmienia.
- ResizeObserverWywołuje funkcję za każdym razem, gdy zmieni się rozmiar obserwowanego elementu, bez względu na przyczynę zmiany.
- getComputedStyle()Zwraca obliczone style elementu, czyli wartości CSS, które przeglądarka faktycznie zastosowała po uwzględnieniu wszystkich reguł.
- Math.round()Zaokrągla liczbę do najbliższej liczby całkowitej.
Widzisz błąd albo brakuje przykładu? Napisz do nas.