Find vindueskoordinaterne for feltet
I iframen nedenfor kan du se et dokument med det grønne “felt”.
Brug JavaScript til at finde vindueskoordinaterne for hjørnerne, der peges på med pilene.
Der er en lille funktion implementeret i dokumentet for nemheds skyld. Et klik ethvert sted viser koordinaterne der.
Din kode skal bruge DOM til at finde vindueskoordinaterne for:
- Øverste venstre, ydre hjørne (det er simpelt).
- Nederste højre, ydre hjørne (også simpelt).
- Øverste venstre, indre hjørne (lidt sværere).
- Nederste højre, indre hjørne (der er flere måder, vælg en).
De koordinater du beregner, skal være de samme som dem, der returneres af museklikket.
P.S. Koden skal også virke, hvis elementet har en anden størrelse eller kant, der ikke er bundet til nogen faste værdier.
Ydre hjørner
Ydre hjørner er det, vi får fra elem.getBoundingClientRect().
Koordinaterne for det øverste venstre hjørne answer1 og det nederste højre hjørne answer2:
let coords = elem.getBoundingClientRect();
let answer1 = [coords.left, coords.top];
let answer2 = [coords.right, coords.bottom];Indre øverste venstre hjørne
Det adskiller sig fra det ydre hjørne ved bredden af kanten. En pålidelig måde at få afstanden er clientLeft/clientTop:
let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];Nederste højre indre hjørne
I dette tilfælde skal vi trække bredden af kanten fra de ydre koordinater.
Vi kunne bruge CSS-måden:
let answer4 = [
coords.right - parseInt(getComputedStyle(field).borderRightWidth),
coords.bottom - parseInt(getComputedStyle(field).borderBottomWidth)
];En alternativ måde ville være at tilføje clientWidth/clientHeight til koordinaterne for det øverste venstre hjørne.
let answer4 = [
coords.left + elem.clientLeft + elem.clientWidth,
coords.top + elem.clientTop + elem.clientHeight
];