Najděte okenní souřadnice hřiště
V následujícím rámu vidíte dokument obsahující zelené „hřiště“.
Pomocí JavaScriptu najděte okenní souřadnice rohů, na které ukazují šipky.
V dokumentu je pro usnadnění implementován drobný prvek. Po kliknutí na kterékoli místo se zobrazí jeho souřadnice.
Váš kód by měl pomocí DOMu zjistit okenní souřadnice:
- Vnějšího levého horního rohu (to je jednoduché).
- Vnějšího pravého dolního rohu (i to je jednoduché).
- Vnitřního levého horního rohu (trochu těžší).
- Vnitřního pravého dolního rohu (je několik způsobů, vyberte si jeden).
Souřadnice, které vypočítáte, by měly být stejné jako ty, které se vrátí po kliknutí myší.
P.S. Kód by měl fungovat i pro element, který má jinou velikost nebo ohraničení, neměl by být vázán na pevné hodnoty.
Vnější rohy
Vnější rohy jsou v zásadě to, co dostaneme od funkce elem.getBoundingClientRect().
Souřadnice levého horního rohu odpověď1 a pravého dolního rohu odpověď2:
let souřadnice = elem.getBoundingClientRect();
let odpověď1 = [souřadnice.left, souřadnice.top];
let odpověď2 = [souřadnice.right, souřadnice.bottom];Vnitřní levý horní roh
Od vnějšího rohu se liší o šířku ohraničení. Spolehlivý způsob, jak vzdálenost zjistit, je clientLeft/clientTop:
let odpověď3 = [souřadnice.left + hřiště.clientLeft, souřadnice.top + hřiště.clientTop];Vnitřní pravý dolní roh
V našem případě musíme odečíst velikost ohraničení od vnějších souřadnic.
Můžeme použít CSS:
let odpověď4 = [
souřadnice.right - parseInt(getComputedStyle(hřiště).borderRightWidth),
souřadnice.bottom - parseInt(getComputedStyle(hřiště).borderBottomWidth)
];Alternativní způsob by byl přičíst clientWidth/clientHeight k souřadnicím levého horního rohu. To je asi ještě lepší:
let odpověď4 = [
souřadnice.left + hřiště.clientLeft + hřiště.clientWidth,
souřadnice.top + hřiště.clientTop + hřiště.clientHeight
];