Skip to content

Commit bef0280

Browse files
committed
Review 2-ui\1-document\11-coordinates\article.md
1 parent 7efd23b commit bef0280

File tree

1 file changed

+7
-7
lines changed

1 file changed

+7
-7
lines changed

2-ui/1-document/11-coordinates/article.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ right:${r.right}
5353
}
5454
</script>
5555
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).
5757
```
5858

5959
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
7070
Nota bene:
7171

7272
- 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 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.
7474

7575
```smart header="Perché le proprietà derivate sono necessarie? Perché esistono `top/left` se ci sono già `x/y`?"
7676
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à.
@@ -144,7 +144,7 @@ elem.style.background = ''; // Error!
144144
145145
## Utilizzare il posizionamento "fisso"
146146
147-
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.
148148
149149
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`).
150150
@@ -154,13 +154,13 @@ Per esempio la funzione `createMessageUnder(elem, html)` in basso, mostra un mes
154154
let elem = document.getElementById("coords-show-mark");
155155
156156
function createMessageUnder(elem, html) {
157-
// create message element
157+
// crea l'elemento messaggio
158158
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
160160
message.style.cssText = "position:fixed; color: red";
161161
162162
*!*
163-
// assign coordinates, don't forget "px"!
163+
// assegna le coordinate, non dimenticare "px"!
164164
let coords = elem.getBoundingClientRect();
165165
166166
message.style.left = coords.left + "px";
@@ -225,7 +225,7 @@ function getCoords(elem) {
225225
226226
Se nell'esempio sopra l'avessimo usata con `position:absolute`, il messaggio sarebbe rimasto vicino l'elemento durante lo scorrimento.
227227
228-
La funzione `createMessageUnder` adattata:
228+
Ecco la funzione `createMessageUnder` adattata:
229229
230230
```js
231231
function createMessageUnder(elem, html) {

0 commit comments

Comments
 (0)