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/09-size-and-scroll/article.md
+25-25Lines changed: 25 additions & 25 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -47,25 +47,25 @@ Ecco un'immagine riassuntiva delle proprietà geometriche:
47
47
48
48
49
49
50
-
I valori di tali proprietà sono tecnicamente numerici, ma questi numeri sono pixel, quindi si tratta delle dimensioni in pixel.
50
+
I valori di tali proprietà sono tecnicamente numerici, ma questi numeri indicano i pixel, quindi si tratta delle dimensioni in pixel.
51
51
52
-
Let's start exploring the properties starting from the outside of the element.
52
+
Cominciamo ad esplorare le proprietà partendo dall'esterno dell'elemento.
53
53
54
54
## offsetParent, offsetLeft/Top
55
55
56
-
These properties are rarely needed, but still they are the "most outer" geometry properties, so we'll start with them.
56
+
Queste proprietà sono raramente necessarie, ma sono comunque le proprietà geometriche "più esterne" e quindi cominceremo da esse.
57
57
58
-
The `offsetParent` is the nearest ancestor that the browser uses for calculating coordinates during rendering.
58
+
La proprietà `offsetParent` contiene un riferimento all'antenato più vicino, usato dal browser per il calcolo delle coordinate durante il rendering.
59
59
60
-
That's the nearest ancestor that is one of the following:
60
+
L'antenato più vicino è uno dei seguenti:
61
61
62
-
1. CSS-positioned (`position` is `absolute`, `relative`, `fixed` or `sticky`), or
63
-
2. `<td>`, `<th>`, or `<table>`, or
62
+
1. l'elemento contenitore più prossimo posizionato tramite CSS (la cui proprietà `position` sia `absolute`, `relative`, `fixed` o `sticky`), oppure
63
+
2. `<td>`, `<th>`, `<table>`, oppure
64
64
3. `<body>`.
65
65
66
-
Properties `offsetLeft/offsetTop` provide x/y coordinates relative to `offsetParent` upper-left corner.
66
+
Le proprietà `offsetLeft/offsetTop` forniscono le coordinate x/y relative all'angolo in alto a sinistra di `offsetParent`.
67
67
68
-
In the example below the inner `<div>` has `<main>` as `offsetParent` and `offsetLeft/offsetTop` shifts from its upper-left corner (`180`):
68
+
Nell'esempio di seguito il `<div>` interno ha `<main>` come `offsetParent` e `offsetLeft/offsetTop` lo spostano dall'angolo in alto a sinistra di questo (`180`):
69
69
70
70
```html run height=10
71
71
<main style="position: relative" id="main">
@@ -75,48 +75,48 @@ In the example below the inner `<div>` has `<main>` as `offsetParent` and `offse
75
75
</main>
76
76
<script>
77
77
alert(example.offsetParent.id); // main
78
-
alert(example.offsetLeft); // 180 (note: a number, not a string "180px")
78
+
alert(example.offsetLeft); // 180 (nota: un numero, non una stringa "180px")
79
79
alert(example.offsetTop); // 180
80
80
</script>
81
81
```
82
82
83
83
84
84
85
-
There are several occasions when `offsetParent`is`null`:
85
+
Ci sono alcune circostanze in cui `offsetParent`è`null`:
86
86
87
-
1.For not shown elements (`display:none`or not in the document).
88
-
2.For`<body>`and`<html>`.
89
-
3.For elements with`position:fixed`.
87
+
1.Per gli elementi nascosti (`display:none`o non nel documento).
88
+
2.Per`<body>`e`<html>`.
89
+
3.Per gli elementi con`position:fixed`.
90
90
91
91
## offsetWidth/Height
92
92
93
-
Now let's move on to the element itself.
93
+
Adesso occupiamoci dell'elemento stesso.
94
94
95
-
These two properties are the simplest ones. They provide the "outer" width/height of the element. Or, in other words, its full size including borders.
95
+
Queste due proprietà sono le più semplici. Forniscono la larghezza e l'altezza "esterne" dell'elemento, o, in altre parole, le sue dimensioni bordi compresi.
96
96
97
97
98
98
99
-
For our sample element:
99
+
In riferimento al nostro esempio:
100
100
101
-
-`offsetWidth = 390`-- the outer width, can be calculated as inner CSS-width (`300px`) plus paddings (`2 * 20px`) and borders (`2 * 25px`).
102
-
-`offsetHeight = 290`-- the outer height.
101
+
-`offsetWidth = 390`la larghezza esterna, risultante dalla larghezza interna (la proprietà CSS`width` pari a `300px`) più i padding (`2 * 20px`) ed i bordi (`2 * 25px`).
102
+
-`offsetHeight = 290`l'altezza esterna.
103
103
104
-
````smart header="Geometry properties are zero/null for elements that are not displayed"
105
-
Geometry properties are calculated only for displayed elements.
104
+
````smart header="Le proprietà geometriche valgono zero/null per gli elementi nascosti"
105
+
Le proprietà geometriche sono calcolate solo per gli elementi visibili.
106
106
107
-
If an element (or any of its ancestors) has `display:none` or is not in the document, then all geometry properties are zero (or `null` for `offsetParent`).
107
+
Se un elemento (o uno dei suoi antenati) ha `display:none` o non è nel documento, allora tutte le proprietà geometriche valgono zero (o `null` per `offsetParent`).
108
108
109
-
For example, `offsetParent` is `null`, and `offsetWidth`, `offsetHeight` are `0` when we created an element, but haven't inserted it into the document yet, or it (or it's ancestor) has `display:none`.
109
+
Per esempio, `offsetParent` vale `null`, e `offsetWidth`, `offsetHeight` sono `0` quando abbiamo creato un elemento, ma non lo abbiamo ancora inserito nel documento, o esso (o un suo antenato) ha `display:none`.
110
110
111
-
We can use this to check if an element is hidden, like this:
111
+
Possiamo servirci di questa particolarità per verificare se un elemento è nascosto, in questo modo:
112
112
113
113
```js
114
114
function isHidden(elem) {
115
115
return !elem.offsetWidth && !elem.offsetHeight;
116
116
}
117
117
```
118
118
119
-
Please note that such `isHidden` returns `true` for elements that are on-screen, but have zero sizes (like an empty `<div>`).
119
+
Si noti che tale metodo `isHidden` restituisce `true` anche per gli elementi che sono sullo schermo, ma hanno dimensioni pari a zero (come un `<div>` vuoto).
0 commit comments