Poznajemy properties klasy Element oraz HTMLElement dotyczące wielkości, rozmiarów i innych takich. Do dzieła.
e.clientTop: szerokość bordera górnego danego elementu
e.clientLeft: szerokość bordera lewego danego elementu
HTMLElement.offsetParent: rodzic, wobec którego element HTML jest offsetowany
HTMLElement.offsetTop: odległość od góry zewnętrznej granicy tego elementu (wliczając margines) do górnego końca paddingu jego offsetParenta, tzw. najbliższego wypozycjonowanego elementu (positon not static)
HTMLElement.offsetLeft: na ile mamy offset w lewo od naszego offsetParenta
e.clientHeight: wysokość elementu, razem z paddingiem, ale bez margina, bordera i podłużnego scrolla, jeśli obecny
e.clientWidth: szerokość elementu, razem z paddingiem, ale bez margina, bordera i pionowego scrolla, jeśli obecny
HTMLElement.offsetWidth: szerokość elementu, wliczając w to padding, border, pionowy scroll (jeśli obecny) ale bez before i after (pseudoelementy)
HTMLElement.offsetHeight: wysokość elementu, wliczając padding i border i podłużnego scrolla (jeśli obecny)
Mamy też metodę e.getBoundingClientRect(). Zwraca ona położenie naszego elementu względem viewportu:
- x/left – odległość od lewej viewportu do elementu
- y/top – odległość od góry
- bottom – top + wysokość
- right – left + szerokość
Myślę, że to dobra okazja, aby przypomnieć różne mouse eventy i ich properties:
- clientX/clientY – odległość miejsca kliknięcia od viewportu
- pageX/pageY – odległość miejsca kliknięcia od strony (wliczając w to elementy ukryte przez scroll)
- screenX/sceenY – odległość miejsca kliknięcia od ekranu (wliczając w to cały ekran)
- offsetX/offsetY – odległość miejsca kliknięcia od krańca paddingu target elementu
Jeszcze to sobie wszystko przećwiczyć zdążymy.
