```
-When the browser does not know the width/height of an image (from tag attributes or CSS), then it assumes them to equal `0` until the image finishes loading.
+当浏览器还不知道图片的宽/高（图片的尺寸可能来自标签属性或 CSS）的时候它会假设它们的尺寸为 `0`直到图片加载完成。
-In real life after the first load browser usually caches the image, and on next loads it will have the size immediately.
+实际使用过程中，浏览器会在图片第一次加载完成后缓存该图片，方便下次再次访问时立即显示图片。
-But on the first load the value of `ball.offsetWidth` is `0`. That leads to wrong coordinates.
+但是在第一次加载时 `ball.offsetWidth` 的值为 `0`，这会导致错误的坐标出现。
-We should fix that by adding `width/height` to `` 有 `` 作为 `offsetParent`，并且 `offsetLeft/offsetTop` 让它从左上角位移（`180`）：
```html run height=10
@@ -84,33 +84,33 @@ In the example below the inner `
` has `` as `offsetParent` and `offse
-There are several occasions when `offsetParent` is `null`:
+有以下几种情况 `offsetParent` 的值为 `null`：
-1. For not shown elements (`display:none` or not in the document).
-2. For `` and ``.
-3. For elements with `position:fixed`.
+1. 未显示的元素（`display:none` 或者不在文档中）。
+2. `` 与 ``。
+3. `position:fixed` 的元素。
## offsetWidth/Height
-Now let's move on to the element itself.
+现在让我们关注元素本身。
-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.
+这两个属性是最简单的。它们提供元素的“外部”宽度/高度。换句话说，它的完整大小包括边框。
-For our sample element:
+在我们的示例元素中：
-- `offsetWidth = 390` -- the outer width, can be calculated as inner CSS-width (`300px`) plus paddings (`2 * 20px`) and borders (`2 * 25px`).
-- `offsetHeight = 290` -- the outer height.
+- `offsetWidth = 390` — 外部宽度，计算方法是内部 css 宽度（`300px`）加上内填充（`2 * 20px`）和边框宽度（`2 * 25px`）。
+- `offsetHeight = 290` — 外部高度。
-````smart header="Geometry properties for not shown elements are zero/null"
-Geometry properties are calculated only for shown elements.
+````smart header="未显示的几何元素的属性值为 0/null"
+几何属性仅为显示出来的元素计算。
-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` depending on what it is.
+如果元素（或其任何祖先）在文档中显示为 `display:none` 或本身不在文档中，则所有几何属性都是 0 或者值为 `null`，这取决于它是什么。
-For example, `offsetParent` is `null`, and `offsetWidth`, `offsetHeight` are `0`.
+例如，`offsetParent` 为 `null`，并且 `offsetWidth`，`offsetHeight` 为 `0`。
-We can use this to check if an element is hidden, like this:
+我们可以用它来检查一个元素是否被隐藏，像这样：
```js
function isHidden(elem) {
@@ -118,73 +118,73 @@ function isHidden(elem) {
}
```
-Please note that such `isHidden` returns `true` for elements that are on-screen, but have zero sizes (like an empty `
`).
+请注意，`isHidden` 返回 `true` 表示元素不在页面中显示，但不代表尺寸为 0（like an empty `
`）。
````
## clientTop/Left
-Inside the element we have the borders.
+在元素内部，我们有边框。
-To measure them, there are properties `clientTop` and `clientLeft`.
+要测量它们，可使用 `clientTop` 和 `clientLeft`。
-In our example:
+在例子中：
-- `clientLeft = 25` -- left border width
-- `clientTop = 25` -- top border width
+- `clientLeft = 25` — 左边框宽度
+- `clientTop = 25` — 上边框宽度
-...But to be precise -- they are not borders, but relative coordinates of the inner side from the outer side.
+...但确切地说，它们不是边框，而是内侧与外侧的相对坐标。
-What's the difference?
+有什么区别？
-It becomes visible when the document is right-to-left (the operating system is in Arabic or Hebrew languages). The scrollbar is then not on the right, but on the left, and then `clientLeft` also includes the scrollbar width.
+当文档是从右向左渲染时就会显现出来（操作系统是阿拉伯语或希伯来语）。此时滚动条不在右边，而是在左边，而 `clientLeft` 则包含了滚动条的宽度。
-In that case, `clientLeft` would be not `25`, but with the scrollbar width `25 + 16 = 41`:
+在这种情况下，`clientLeft` 的值将不是 `25`，而是加上滚动条的宽度 `25 + 16 = 41`：
## clientWidth/Height
-These properties provide the size of the area inside the element borders.
+这些属性提供元素边框内区域的大小。
-They include the content width together with paddings, but without the scrollbar:
+他们包含内容宽度和内填充宽度，但不包括滚动条宽度：
-On the picture above let's first consider `clientHeight`: it's easier to evaluate. There's no horizontal scrollbar, so it's exactly the sum of what's inside the borders: CSS-height `200px` plus top and bottom paddings (`2 * 20px`) total `240px`.
+在上面的图片中，我们首先考虑 `clientHeight`：这很容易计算。没有水平滚动条，所以它正好是边界内的总和：CSS 高度 `200px` 加上顶部和底部的内填充宽度（`2 * 20px`），总计 `240px`。
-Now `clientWidth` -- here the content width is not `300px`, but `284px`, because `16px` are occupied by the scrollbar. So the sum is `284px` plus left and right paddings, total `324px`.
+这种情况下的 `clientWidth` — 这里的内容宽度不是 `300px`，而是`284px`，因为 `16px` 是滚动条的宽度。所以加起来就是 `284px` 加上左右内间距，总和 `324px`。
-**If there are no paddings, then `clientWidth/Height` is exactly the content area, inside the borders and the scrollbar (if any).**
+**如果没有内间距，那么 `clientWidth/Height` 就是代表内容的宽度, 这里的内容指的是内间距和滚动条以内 (如果还有其他的)。**
-So when there's no padding we can use `clientWidth/clientHeight` to get the content area size.
+因此，当没有内填充时，我们可以使用 `clientWidth/clientHeight` 来获取内容区域大小。
## scrollWidth/Height
-- Properties `clientWidth/clientHeight` only account for the visible part of the element.
-- Properties `scrollWidth/scrollHeight` also include the scrolled out (hidden) parts:
+- 属性 `clientWidth/clientHeight` 只考虑元素的可见部分。
+- 属性 `scrollWidth/scrollHeight` 还包括滚动（隐藏）部分：
-On the picture above:
+上图：
-- `scrollHeight = 723` -- is the full inner height of the content area including the scrolled out parts.
-- `scrollWidth = 324` -- is the full inner width, here we have no horizontal scroll, so it equals `clientWidth`.
+- `scrollHeight = 723` — 是内容区域的完整内部高度，包括滚动部分。
+- `scrollWidth = 324` — 是完整的内部宽度，这里没有水平滚动条，所以它等于 `clientWidth`。
-We can use these properties to expand the element wide to its full width/height.
+我们可以使用这些属性将元素扩展到其完全宽度/高度。
-Like this:
+就像这样：
```js
-// expand the element to the full content height
+// 扩展元素高度到完全高度
element.style.height = `${element.scrollHeight}px`;
```
```online
-Click the button to expand the element:
+单击按钮展开元素：
, we can read CSS-height and width using `getComputedStyle`.
+但是，正如我们从《信息：样式和类》一章所知道的，我们可以使用 `getComputedStyle` 来读取CSS的高度和宽度。
-So why not to read the width of an element like this?
+那么为什么不像这样读取一个元素的高度呢？
```js run
let elem = document.body;
@@ -227,10 +227,10 @@ let elem = document.body;
alert( getComputedStyle(elem).width ); // show CSS width for elem
```
-Why should we use geometry properties instead? There are two reasons:
+为什么我们应该使用几何属性呢？有两个原因：
-1. First, CSS width/height depend on another property: `box-sizing` that defines "what is" CSS width and height. A change in `box-sizing` for CSS purposes may break such JavaScript.
-2. Second, CSS `width/height` may be `auto`, for instance for an inline element:
+1. 首先，CSS 宽度/高度取决于另一个属性：`box-sizing`，它定义了 “什么是” CSS 宽度和高度。用作 CSS 样式的 `box-sizing` 的更改可能会破坏这样的 JavaScript 定义。
+2. 其次，CSS 的 `width/height` 可能是 `auto`，例如内联元素：
```html run
Hello!
@@ -242,34 +242,34 @@ Why should we use geometry properties instead? There are two reasons:
```
- From the CSS standpoint, `width:auto` is perfectly normal, but in JavaScript we need an exact size in `px` that we can use in calculations. So here CSS width is useless at all.
+ 从 CSS 的观点来看，`width:auto` 是完全正常的，但是在 JavaScript 中，我们需要一个精确的 `px` 大小，以便我们在计算过程中使用它，所以 CSS 宽度根本没用。
-And there's one more reason: a scrollbar. Sometimes the code that works fine without a scrollbar starts to bug with it, because a scrollbar takes the space from the content in some browsers. So the real width available for the content is *less* than CSS width. And `clientWidth/clientHeight` take that into account.
+还有一个原因：滚动条。有时，没有滚动条的代码工作得很好，因为它在一些浏览器中占据了内容的一部分空间。因此，内容的实际宽度比 CSS 宽度要小。而 `clientWidth/clientHeight` 考虑到这一点。
-...But with `getComputedStyle(elem).width` the situation is different. Some browsers (e.g. Chrome) return the real inner width, minus the scrollbar, and some of them (e.g. Firefox) -- CSS width (ignore the scrollbar). Such cross-browser differences is the reason not to use `getComputedStyle`, but rather rely on geometry properties.
+但是，`getComputedStyle(elem).width` 的情况是不同的。一些浏览器（例如 Chrome）返回真正的内部宽度，这种情况不考虑滚动条，以及其中一些（例如Firefox）— CSS 宽度（忽略滚动条）。这样的跨浏览器差异是不使用 `getComputedStyle` 样式的原因，而是依赖于几何属性。
```online
-If your browser reserves the space for a scrollbar (most browsers for Windows do), then you can test it below.
+如果浏览器保留滚动条的空间（大多数 Windows 中的浏览器），那么你可以在下面测试它。
[iframe src="cssWidthScroll" link border=1]
-The element with text has CSS `width:300px`.
+包含文本的元素有这样的样式 `width:300px`。
-On a Desktop Windows OS, Firefox, Chrome, Edge all reserve the space for the scrollbar. But Firefox shows `300px`, while Chrome and Edge show less. That's because Firefox returns the CSS width and other browsers return the "real" width.
+在桌面 Windows 操作系统上，Firefox、Chrome、Edgy 都为滚动条保留空间，但 Firefox 显示 `300px`，而 Chrome 和 Edgy 显示较少。这是因为 Firefox 返回 CSS 宽度，其他浏览器返回“真实”宽度。
```
-Please note that the described difference is only about reading `getComputedStyle(...).width` from JavaScript, visually everything is correct.
+请注意，所描述的差异只是关于从 JavaScript 读取的 `getComputedStyle(...).width`，而视觉上一切都是正确的。
-## Summary
+## 总结
-Elements have the following geometry properties:
+元素具有以下几何属性：
-- `offsetParent` -- is the nearest positioned ancestor or `td`, `th`, `table`, `body`.
-- `offsetLeft/offsetTop` -- coordinates relative to the left-upper edge of `offsetParent`.
-- `offsetWidth/offsetHeight` -- "outer" width/height of an element including borders.
-- `clientLeft/clientTop` -- the distance from the left-upper outer corner to its left-upper inner corner. For left-to-right OS they are always the widths of left/top borders. For right-to-left OS the vertical scrollbar is on the left so `clientLeft` includes its width too.
-- `clientWidth/clientHeight` -- the width/height of the content including paddings, but without the scrollbar.
-- `scrollWidth/scrollHeight` -- the width/height of the content including the scrolled out parts. Also includes paddings, but not the scrollbar.
-- `scrollLeft/scrollTop` -- width/height of the scrolled out part of the element, starting from its left-upper corner.
+- `offsetParent` — 是最近的有定位属性的祖先元素，或者是 `td`、`th`、`table`、`body`。
+- `offsetLeft/offsetTop` — 是相对于 `offsetParent` 的左上角边缘坐标。
+- `offsetWidth/offsetHeight` — 元素的“外部”宽/高 ，边框尺寸计算在内。
+- `clientLeft/clientTop` — 从元素左上角外部到内部的距离，对于从左到右渲染元素的操作系统，它始终是左/顶部边界的宽度，而对于从右到左的操作系统，垂直滚动条在左边，所以 `clientLeft` 也包括滚动条的宽度。
+- `clientWidth/clientHeight` — 内容的宽度/高度，包括内间距，但没有滚动条。
+- `scrollWidth/scrollHeight` — 内容的宽度/高度，包括可滚动的可视区域外的尺寸，也包括内间距，但不包括滚动条。
+- `scrollLeft/scrollTop` — 从左上角开始的元素的滚动部分的宽度/高度。
-All properties are read-only except `scrollLeft/scrollTop`. They make the browser scroll the element if changed.
+除了 `scrollLeft/scrollTop` 之外，所有属性都是只读的。如果更改，浏览器会使元素滚动。
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
@@ -193,33 +193,33 @@ Click the button to expand the element:
## scrollLeft/scrollTop
-Properties `scrollLeft/scrollTop` are the width/height of the hidden, scrolled out part of the element.
+属性 `scrollLeft/scrollTop` 是元素隐藏、滚动部分的宽度/高度。
-On the picture below we can see `scrollHeight` and `scrollTop` for a block with a vertical scroll.
+下面的图片我们可以看到 `scrollHeight` 和 `scrollTop` 是一个垂直滚动块的属性。
-In other words, `scrollTop` is "how much is scrolled up".
+换种说法，`scrollTop` 就是 “滚动了多少” 的意思。
-````smart header="`scrollLeft/scrollTop` can be modified"
-Most geometry properties that are read-only, but `scrollLeft/scrollTop` can be changed, and the browser will scroll the element.
+````smart header="`scrollLeft/scrollTop` 可修改 "
+大多数几何属性是只读的，但是 `scrollLeft/scrollTop` 可以改变，浏览器将会直接滚动元素。
```online
-If you click the element below, the code `elem.scrollTop += 10` executes. That makes the element content scroll `10px` down.
+如果单击下面的元素，代码 `elem.scrollTop += 10` 将会执行，这使得元素向下滚动 `10px`。
Click
Me
1
2
3
4
5
6
7
8
9
```
-Setting `scrollTop` to `0` or `Infinity` will make the element scroll to the very top/bottom respectively.
+将 `scrollTop` 设置为 `0` 或 `Infinity` 将使元素分别滚动到顶部/底部。
````
-## Don't take width/height from CSS
+## 不要从 CSS 中获取宽高
-We've just covered geometry properties of DOM elements. They are normally used to get widths, heights and calculate distances.
+我们刚刚介绍了 DOM 元素的几何属性。它们通常用于获得宽度、高度和计算距离。
-But as we know from the chapter Me
1
2
3
4
5
6
7
8
9