You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/1-document/11-coordinates/article.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -53,7 +53,7 @@ right:${r.right}
53
53
}
54
54
</script>
55
55
56
-
Se scorrete la pagina e ripetete il test, noterete che quando cambia la posizione relativa alla finestra del pulsante, cambiano anche le sue coordinate relative alla finestra (`y/top/bottom` se scorri verticalmente)
56
+
Se scorrete la pagina e ripetete il test, noterete che quando cambia la posizione relativa alla finestra del pulsante, cambiano anche le sue coordinate relative alla finestra (`y/top/bottom` se scorri verticalmente).
57
57
```
58
58
59
59
Di seguito un'immagine descrittiva dell'output di `elem.getBoundingClientRect()`:
@@ -70,7 +70,7 @@ Come potete osservare, `x/y` e `width/height` descrivono pienamente il rettangol
70
70
Nota bene:
71
71
72
72
- Le coordinate possono avere valori decimali, come `10.5`. È normale, il browser internamente usa frazioni nei calcoli. Non dobbiamo arrotondare quando assegniamo i valori a `style.left/top`.
73
-
- Le coordinate possono essere negative. Per esempio se la pagina scorre in modo che `elem` sia al di là del bordo della finestra, allora `elem.getBoundingClientRect().top` è negativa.
73
+
- Le coordinate possono essere negative. Per esempio se la pagina scorre in modo che `elem` sia al di sopra del bordo della finestra, allora `elem.getBoundingClientRect().top` è negativa.
74
74
75
75
```smart header="Perché le proprietà derivate sono necessarie? Perché esistono `top/left` se ci sono già `x/y`?"
76
76
In matematica un rettangolo è definito unicamente dalla sua origine `(x,y)` e dal vettore di direzione `(width,height)`. Le proprietà aggiuntive derivate esistono quindi per comodità.
La maggior parte delle volte abbiamo bisogno delle coordinate per posizionare qualcosa.
147
+
La maggior parte delle volte per posizionare qualcosa abbiamo bisogno delle coordinate.
148
148
149
149
Per mostrare qualcosa vicino un elemento, possiamo usare `getBoundingClientRect` per ricavare le sue coordinate e successivamente utilizzare la proprietà CSS `position` insieme a `left/top` (o `right/bottom`).
150
150
@@ -154,13 +154,13 @@ Per esempio la funzione `createMessageUnder(elem, html)` in basso, mostra un mes
154
154
let elem = document.getElementById("coords-show-mark");
155
155
156
156
function createMessageUnder(elem, html) {
157
-
// create message element
157
+
// crea l'elemento messaggio
158
158
let message = document.createElement('div');
159
-
// better to use a css class for the style here
159
+
// è preferibile usare una classe CSS per assegnargli degli stili
0 commit comments