From 7ad30731f38910a7aa9a63bf4990edc5a978fff2 Mon Sep 17 00:00:00 2001 From: qinjiamei Date: Wed, 22 Aug 2018 11:10:51 +0800 Subject: [PATCH 01/13] 2-ui/1-document/09-size-and-scroll --- .../1-get-scroll-height-bottom/solution.md | 4 +- .../1-get-scroll-height-bottom/task.md | 10 +- .../2-scrollbar-width/solution.md | 8 +- .../2-scrollbar-width/task.md | 10 +- .../6-width-vs-clientwidth/solution.md | 10 +- .../6-width-vs-clientwidth/task.md | 8 +- 2-ui/1-document/09-size-and-scroll/article.md | 180 +++++++++--------- 7 files changed, 115 insertions(+), 115 deletions(-) diff --git a/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md index 01e0736552..45f1d5c5cf 100644 --- a/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md +++ b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md @@ -1,7 +1,7 @@ -The solution is: +解决方式： ```js let scrollBottom = elem.scrollHeight - elem.scrollTop - elem.clientHeight; ``` -In other words: (full height) minus (scrolled out top part) minus (visible part) -- that's exactly the scrolled out bottom part. +换句话说：（完全高度）减去（已滚动的高度）减去（可见部分的高度）--得到的结果就是下方隐藏部分的高度。 diff --git a/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md index b0f1f22140..2ecbb45893 100644 --- a/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md +++ b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md @@ -1,11 +1,11 @@ -importance: 5 +重要性: 5 --- -# What's the scroll from the bottom? +# 怎样从底部向上滚动？ -The `elem.scrollTop` property is the size of the scrolled out part from the top. How to get "`scrollBottom`" -- the size from the bottom? + `elem.scrollTop` 属性是从顶部滚动出来的部分的大小，何获得 `scrollBottom`——从底部滚动的尺寸？ -Write the code that works for an arbitrary `elem`. +编写适用于任意元素的代码。 -P.S. Please check your code: if there's no scroll or the element is fully scrolled down, then it should return `0`. +P.S. 请检查您的代码：如果没有滚动条或元素完全向下滚动，那么它应该返回“0”。 diff --git a/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/solution.md b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/solution.md index 1ba1e5e576..37341798b1 100644 --- a/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/solution.md +++ b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/solution.md @@ -1,16 +1,16 @@ -To get the scrollbar width, we can create an element with the scroll, but without borders and paddings. +为了获得滚动条宽度，我们可以创建一个带有滚动条的元素，但是没有边框和内间距。 -Then the difference between its full width `offsetWidth` and the inner content area width `clientWidth` will be exactly the scrollbar: +然后，它的完全宽度 `offsetWidth` 和内容课时宽度 `clientWidth` 之间的差就是滚动条的宽度： ```js run -// create a div with the scroll +// 创建一个包含滚动条的块 let div = document.createElement('div'); div.style.overflowY = 'scroll'; div.style.width = '50px'; div.style.height = '50px'; -// must put it in the document, otherwise sizes will be 0 +// 必须添加到文档中，否则尺寸为0 document.body.append(div); let scrollWidth = div.offsetWidth - div.clientWidth; diff --git a/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md index 67787894a4..44c0f3cf6c 100644 --- a/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md +++ b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md @@ -1,11 +1,11 @@ -importance: 3 +重要性: 3 --- -# What is the scrollbar width? +# 怎样计算滚动条宽度？ -Write the code that returns the width of a standard scrollbar. +编写返回标准滚动条宽度的代码。 -For Windows it usually varies between `12px` and `20px`. If the browser doesn't reserves any space for it, then it may be `0px`. +对于Windows，它通常在 `12px` 和 `20px` 之间变化。如果浏览器不为它保留任何空间，那么它可能是 `0px`。F -P.S. The code should work for any HTML document, do not depend on its content. +P.S. 代码应该适用于任何HTML文档，且不依赖于它的内容元素。 diff --git a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md index a011d5a727..c5462bddcc 100644 --- a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md +++ b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md @@ -1,6 +1,6 @@ -Differences: +不同点: -1. `clientWidth` is numeric, while `getComputedStyle(elem).width` returns a string with `px` at the end. -2. `getComputedStyle` may return non-numeric width like `"auto"` for an inline element. -3. `clientWidth` is the inner content area of the element plus paddings, while CSS width (with standard `box-sizing`) is the inner conand sometent area *without paddings*. -4. If there's a scrollbar and the browser reserves the space for it, some browser substract that space from CSS width (cause it's not available for content any more), and some do not. The `clientWidth` property is always the same: scrollbar size is substracted if reserved. +1. `clientWidth` 值是数值, 然而 `getComputedStyle(elem).width` 返回一个包含 `px` 的字符串。 +2. `getComputedStyle` 可能返回非数值的结果，例如内联元素的 `"auto"`。 +3. `clientWidth` 是元素的内部内容区域加上内间距，而CSS宽度（具有标准的 `box-sizing`）是内部 *不包括内间距* 的空间区域。 +4. 如果有一个滚动条，一般浏览器保留它的空间，有的浏览器从CSS宽度中减去这个空间（因为它不再用于内容），而有些则不这样做。`clientWidth` 属性总是相同的：如果保留，滚动条大小是等值的。 \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md index 5378c5915b..22e4ef0759 100644 --- a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md +++ b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md @@ -1,9 +1,9 @@ -importance: 5 +重要性: 5 --- -# The difference: CSS width versus clientWidth +# 不同点: CSS宽度与设备宽度 -What's the difference between `getComputedStyle(elem).width` and `elem.clientWidth`? + `getComputedStyle(elem).width` 与 `elem.clientWidth` 之间的差别在哪? -Give at least 3 differences. The more the better. +指出至少三种不同点，越多越好。 diff --git a/2-ui/1-document/09-size-and-scroll/article.md b/2-ui/1-document/09-size-and-scroll/article.md index 4fadba814e..91350d25dd 100644 --- a/2-ui/1-document/09-size-and-scroll/article.md +++ b/2-ui/1-document/09-size-and-scroll/article.md @@ -1,13 +1,13 @@ -# Element size and scrolling +# 元素的尺寸与滚动 -There are many JavaScript properties that allow us to read information about element width, height and other geometry features. +JavaScript中存在许多属性让我们能够读取元素的宽度、高度或其他具有几何特征的信息。 -We often need them when moving or positioning elements in JavaScript, to correctly calculate coordinates. +在移动或定位JavaScript元素时，我们经常需要它们来计算元素的坐标。 -## Sample element +## 示例元素 -As a sample element to demonstrate properties we'll use the one given below: +作为演示属性的示例元素，我们将使用下面给出的一个元素： ```html no-beautify
@@ -24,49 +24,49 @@ As a sample element to demonstrate properties we'll use the one given below: ``` -It has the border, padding and scrolling. The full set of features. There are no margins, as they are not the part of the element itself, and there are no special properties for them. +它有边框、内填充和滚动条等全部特征属性，但是这不包括外边距，因为它不是元素本身的一部分，并且它们没什么特殊的属性。 -The element looks like this: +元素就像这样： ![](metric-css.png) -You can [open the document in the sandbox](sandbox:metric). +你可以 [在sandbox中打开文档](sandbox:metric). ```smart header="Mind the scrollbar" -The picture above demonstrates the most complex case when the element has a scrollbar. Some browsers (not all) reserve the space for it by taking it from the content. +上例图片演示了当元素有滚动条时最复杂的情况，一些浏览器（不是全部）通过从内容中获取显示空间来保留它。 -So, without scrollbar the content width would be `300px`, but if the scrollbar is `16px` wide (the width may vary between devices and browsers) then only `300 - 16 = 284px` remains, and we should take it into account. That's why examples from this chapter assume that there's a scrollbar. If there's no scrollbar, then things are just a bit simpler. +因此，没有滚动条时，内容宽度将是 “300 px”，但是如果滚动条宽度是 “16px”（宽度可以在设备和浏览器之间变化），那么只有“300 - 16＝280px”仍然存在，这是我们必须考虑到的事。这就是为什么本章的例子总是假设有滚动条的原因。如果没有滚动条，那么事情就有点简单了。 ``` ```smart header="The `padding-bottom` may be filled with text" -Usually paddings are shown empty on illustrations, but if there's a lot of text in the element and it overflows, then browsers show the "overflowing" text at `padding-bottom`, so you can see that in examples. But the padding is still there, unless specified otherwise. +内填充通常在插图中显示的是空的，但是如果元素中有很多文本，并且它溢出，那么浏览器在“下填充”显示“溢出”文本，这可以在示例中看到。但是填充物仍然存在，除非另有说明。 ``` -## Geometry +## 几何学 -Element properties that provide width, height and other geometry are always numbers. They are assumed to be in pixels. +提供宽度、高度和其他几何形状的元素属性通过数值来计算。它们被假定为像素。 -Here's the overall picture: +一下是显示总体情况的图片： ![](metric-all.png) -They are many properties, it's difficult to fit them all in the single picture, but their values are simple and easy to understand. +它们有很多属性，很难将它们全部放在单个图片中，但是它们的值很简单，容易理解。 -Let's start exploring them from the outside of the element. +让我们从元素的外部开始探索它们。 ## offsetParent, offsetLeft/Top -These properties are rarely needed, but still they are the "most outer" geometry properties, so we'll start with them. +这些属性很少出现，但它们仍然是“最外层”的几何属性，所以我们将从它们开始。 -The `offsetParent` is the nearest ancestor that is: + `offsetParent` 是最近的祖先元素: -1. CSS-positioned (`position` is `absolute`, `relative` or `fixed`), -2. or ``, ``, ``, -2. or ``. +1. CSS定位 (`position` 为 `absolute`, `relative` 为 `fixed`), +2. 或者`
`, ``, ``, +2. 或者``. -In most practical cases we can use `offsetParent` to get the nearest CSS-positioned ancestor. And `offsetLeft/offsetTop` provide x/y coordinates relative to it's left-upper corner. +在大多数实际情况下，我们可以使用 `offsetParent` 来获得最近的CSS定位祖先。`offsetLeft/offsetTop` 提供相对于元素左上角的x/y坐标。 -In the example below the inner `
` has `
` as `offsetParent` and `offsetLeft/offsetTop` shifts from its left-upper corner (`180`): +在下面的例子中，内部 `
` 有`
` 作为 `offsetParent` ，并且 `offsetLeft/offsetTop` 让它从左上角位移 (`180`): ```html run height=10
@@ -84,33 +84,33 @@ In the example below the inner `
` has `
` as `offsetParent` and `offse ![](metric-offset-parent.png) -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. +这两个属性是最简单的。它们提供元素的 “外部” 宽度/高度。换句话说，它的完整大小包括边界。 ![](metric-offset-width-height.png) -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. +几何属性仅为所示元素计算。 -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,65 +118,65 @@ 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` -- 上边框宽度 ![](metric-client-left-top.png) -...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`: ![](metric-client-left-top-rtl.png) ## 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: +他们包含内容宽度和内填充宽度，但不包括滚动条宽度： ![](metric-client-width-height.png) -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` 就是代表内容的宽度, 这里的内容指的是内间距和滚动条以内 (如果还有其他的).** ![](metric-client-width-nopadding.png) -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` 还包括滚动（隐藏）部分： ![](metric-scroll-width-height.png) -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 @@ -184,7 +184,7 @@ element.style.height = `${element.scrollHeight}px`; ``` ```online -Click the button to expand the element: +单击按钮展开元素：
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` 是一个垂直滚动块的属性。 ![](metric-scroll-top.png) -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. +大多数几何属性是只读的，但是 `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 , 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` 之外，所有属性都是只读的。如果更改，浏览器会使元素滚动。 From c4f0c589bf285b90f6a544e2ef577a9cfe60c28f Mon Sep 17 00:00:00 2001 From: qinjiamei Date: Mon, 3 Sep 2018 11:34:44 +0800 Subject: [PATCH 02/13] 2-ui/1-document/09-size-and-scroll --- .../1-get-scroll-height-bottom/task.md | 4 +- .../2-scrollbar-width/solution.md | 4 +- .../2-scrollbar-width/task.md | 4 +- .../6-width-vs-clientwidth/solution.md | 4 +- .../6-width-vs-clientwidth/task.md | 2 +- 2-ui/1-document/09-size-and-scroll/article.md | 52 +++++++++---------- 6 files changed, 35 insertions(+), 35 deletions(-) diff --git a/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md index 2ecbb45893..2764b601ab 100644 --- a/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md +++ b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md @@ -1,8 +1,8 @@ -重要性: 5 +importance: 5 --- -# 怎样从底部向上滚动？ +# 相对于底部滚动了多少？ `elem.scrollTop` 属性是从顶部滚动出来的部分的大小，何获得 `scrollBottom`——从底部滚动的尺寸？ diff --git a/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/solution.md b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/solution.md index 37341798b1..64891032df 100644 --- a/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/solution.md +++ b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/solution.md @@ -1,6 +1,6 @@ 为了获得滚动条宽度，我们可以创建一个带有滚动条的元素，但是没有边框和内间距。 -然后，它的完全宽度 `offsetWidth` 和内容课时宽度 `clientWidth` 之间的差就是滚动条的宽度： +然后，它的完全宽度 `offsetWidth` 和内容宽度 `clientWidth` 之间的差就是滚动条的宽度： ```js run // 创建一个包含滚动条的块 @@ -10,7 +10,7 @@ div.style.overflowY = 'scroll'; div.style.width = '50px'; div.style.height = '50px'; -// 必须添加到文档中，否则尺寸为0 +// 必须添加到文档中，否则尺寸为 0 document.body.append(div); let scrollWidth = div.offsetWidth - div.clientWidth; diff --git a/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md index 44c0f3cf6c..82ba162df7 100644 --- a/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md +++ b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md @@ -1,4 +1,4 @@ -重要性: 3 +importance: 3 --- @@ -6,6 +6,6 @@ 编写返回标准滚动条宽度的代码。 -对于Windows，它通常在 `12px` 和 `20px` 之间变化。如果浏览器不为它保留任何空间，那么它可能是 `0px`。F +对于Windows，它通常在 `12px` 和 `20px` 之间变化。如果浏览器不为它保留任何空间，那么它可能是 `0px`。 P.S. 代码应该适用于任何HTML文档，且不依赖于它的内容元素。 diff --git a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md index c5462bddcc..b89109baec 100644 --- a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md +++ b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md @@ -2,5 +2,5 @@ 1. `clientWidth` 值是数值, 然而 `getComputedStyle(elem).width` 返回一个包含 `px` 的字符串。 2. `getComputedStyle` 可能返回非数值的结果，例如内联元素的 `"auto"`。 -3. `clientWidth` 是元素的内部内容区域加上内间距，而CSS宽度（具有标准的 `box-sizing`）是内部 *不包括内间距* 的空间区域。 -4. 如果有一个滚动条，一般浏览器保留它的空间，有的浏览器从CSS宽度中减去这个空间（因为它不再用于内容），而有些则不这样做。`clientWidth` 属性总是相同的：如果保留，滚动条大小是等值的。 \ No newline at end of file +3. `clientWidth` 是元素的内部内容区域加上内间距，而CSS宽度（具有标准的 `box-sizing`）是内部 * 不包括内间距 * 的空间区域。 +4. 如果有一个滚动条，一般浏览器保留它的空间，有的浏览器从CSS宽度中减去这个空间（因为它不再用于内容），而有些则不这样做。`clientWidth` 属性总是相同的：如果保留了滚动条，那么它的宽度将被删去。 \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md index 22e4ef0759..a74899552d 100644 --- a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md +++ b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md @@ -1,4 +1,4 @@ -重要性: 5 +importance: 5 --- diff --git a/2-ui/1-document/09-size-and-scroll/article.md b/2-ui/1-document/09-size-and-scroll/article.md index 91350d25dd..0b034da7e3 100644 --- a/2-ui/1-document/09-size-and-scroll/article.md +++ b/2-ui/1-document/09-size-and-scroll/article.md @@ -32,21 +32,21 @@ JavaScript中存在许多属性让我们能够读取元素的宽度、高度或 你可以 [在sandbox中打开文档](sandbox:metric). -```smart header="Mind the scrollbar" -上例图片演示了当元素有滚动条时最复杂的情况，一些浏览器（不是全部）通过从内容中获取显示空间来保留它。 +```smart header=" 注意滚动条 " +上例图片演示了当元素有滚动条时最复杂的情况，一些浏览器（不是全部）通过牺牲内容空间来保留滚动条。 -因此，没有滚动条时，内容宽度将是 “300 px”，但是如果滚动条宽度是 “16px”（宽度可以在设备和浏览器之间变化），那么只有“300 - 16＝280px”仍然存在，这是我们必须考虑到的事。这就是为什么本章的例子总是假设有滚动条的原因。如果没有滚动条，那么事情就有点简单了。 +因此，没有滚动条时，内容宽度将是 `300 px`，但是如果滚动条宽度是 `16px`（不同的设备和浏览器，宽度可能会不一样），那么还剩下`300 - 16＝280px`，这是我们必须考虑到的事。这就是为什么本章的例子总是假设有滚动条的原因。如果没有滚动条，那么事情就会更简单一些。 ``` -```smart header="The `padding-bottom` may be filled with text" -内填充通常在插图中显示的是空的，但是如果元素中有很多文本，并且它溢出，那么浏览器在“下填充”显示“溢出”文本，这可以在示例中看到。但是填充物仍然存在，除非另有说明。 +```smart header=" 文本可能会溢出到 `padding-bottom` 中 " +内填充通常在插图中显示的是空的，但是如果元素中有很多文本，并且溢出，那么浏览器在 `padding-bottom` 中显示 “溢出” 文本，这可以在示例中看到。但是填充物仍然存在，除非另有说明。 ``` ## 几何学 提供宽度、高度和其他几何形状的元素属性通过数值来计算。它们被假定为像素。 -一下是显示总体情况的图片： +以下是显示总体情况的图片： ![](metric-all.png) @@ -60,9 +60,9 @@ JavaScript中存在许多属性让我们能够读取元素的宽度、高度或 `offsetParent` 是最近的祖先元素: -1. CSS定位 (`position` 为 `absolute`, `relative` 为 `fixed`), -2. 或者`
`, ``, ``, -2. 或者``. +1. CSS定位 (`position` 为 `absolute`、`relative` 或 `fixed`), +2. 或者 `
`、 ``、 ``, +2. 或者 ``. 在大多数实际情况下，我们可以使用 `offsetParent` 来获得最近的CSS定位祖先。`offsetLeft/offsetTop` 提供相对于元素左上角的x/y坐标。 @@ -94,7 +94,7 @@ JavaScript中存在许多属性让我们能够读取元素的宽度、高度或 现在让我们关注元素本身。 -这两个属性是最简单的。它们提供元素的 “外部” 宽度/高度。换句话说，它的完整大小包括边界。 +这两个属性是最简单的。它们提供元素的 “外部” 宽度/高度。换句话说，它的完整大小包括边框。 ![](metric-offset-width-height.png) @@ -103,8 +103,8 @@ JavaScript中存在许多属性让我们能够读取元素的宽度、高度或 - `offsetWidth = 390` -- 外部宽度，计算方法是内部css宽度 (`300px`) 加上内填充 (`2 * 20px`) 和边框宽度 (`2 * 25px`). - `offsetHeight = 290` -- 外部高度. -````smart header="Geometry properties for not shown elements are zero/null" -几何属性仅为所示元素计算。 +````smart header=" 未显示的几何元素的属性值为 0/null " +几何属性仅为显示出来的元素计算。 如果元素（或其任何祖先）在文档中显示为 `display:none` 或本身不在文档中，则所有几何属性都是 0 或者值为 `null`，这取决于它是什么。 @@ -123,7 +123,7 @@ function isHidden(elem) { ## clientTop/Left -在元素内部，我们有边界。 +在元素内部，我们有边框。 要测量它们，可使用 `clientTop` 和 `clientLeft`. @@ -134,11 +134,11 @@ function isHidden(elem) { ![](metric-client-left-top.png) -...但确切地说，它们不是边界，而是内侧与外侧的相对坐标。 +...但确切地说，它们不是边框，而是内侧与外侧的相对坐标。 有什么区别？ -当文档是从右往左渲染这没什么区别（操作系统是阿拉伯语或希伯来语），滚动条不在右边，而是在左边，`clientLeft` 包含滚动条宽度。 +当文档是从右往左渲染这没什么区别（操作系统是阿拉伯语或希伯来语）此时滚动条不在右边，而是在左边，而 `clientLeft` 则包含了滚动条的宽度。 在这种情况下， `clientLeft` 的值将不是 `25`, 而是加上滚动条的宽度 `25 + 16 = 41`: @@ -152,7 +152,7 @@ function isHidden(elem) { ![](metric-client-width-height.png) -在上面的图片中，我们首先考虑 `clientHeight`： 这很容易计算。 没有水平滚动条，所以它正好是边界内的总和：CSS高度 `200px` 加上顶部和底部的内填充宽度（`2 * 20px`），总计 `240px`。 +在上面的图片中，我们首先考虑 `clientHeight`：这很容易计算。没有水平滚动条，所以它正好是边界内的总和：CSS高度 `200px` 加上顶部和底部的内填充宽度（`2 * 20px`），总计 `240px`。 这种情况下的 `clientWidth` -- 这里的内容宽度不是 `300px`, 而是`284px`, 因为 `16px` 是滚动条的宽度。所以加起来就是 `284px` 加上左右内间距，总和 `324px`. @@ -179,7 +179,7 @@ function isHidden(elem) { 就像这样： ```js -// expand the element to the full content height +// 扩展元素高度到完全高度 element.style.height = `${element.scrollHeight}px`; ``` @@ -201,8 +201,8 @@ element.style.height = `${element.scrollHeight}px`; 换种说法，`scrollTop`就是 “滚动了多少” 的意思。 -````smart header="`scrollLeft/scrollTop` can be modified" -大多数几何属性是只读的，但是 `scrollLeft/scrollTop` 可以改变，浏览器会自动计算元素的滚动高度。 +````smart header="`scrollLeft/scrollTop` 可修改 " +大多数几何属性是只读的，但是 `scrollLeft/scrollTop` 可以改变，浏览器将会直接滚动元素。 ```online 如果单击下面的元素，代码 `elem.scrollTop += 10` 将会执行，这使得元素向下滚动 `10px`。 @@ -213,7 +213,7 @@ element.style.height = `${element.scrollHeight}px`; 将 `scrollTop` 设置为 `0` 或 `Infinity` 将使元素分别滚动到顶部/底部。 ```` -## 不要从CSS中获取宽高 +## 不要从 CSS 中获取宽高 我们刚刚介绍了DOM元素的几何属性。它们通常用于获得宽度、高度和计算距离。 @@ -242,11 +242,11 @@ alert( getComputedStyle(elem).width ); // show CSS width for elem ``` - 从CSS的观点来看，`width:auto` 是完全正常的，但是在JavaScript中，我们需要一个精确的 `px` 大小，我们可以在计算过程中使用它，所以CSS宽度根本没用。 + 从CSS的观点来看，`width:auto` 是完全正常的，但是在JavaScript中，我们需要一个精确的 `px` 大小，以便我们在计算过程中使用它，所以CSS宽度根本没用。 -还有一个原因：滚动条。有时，没有滚动条的代码工作得很好，因为它在一些浏览器中通过内容获取空间尺寸。因此，内容的实际宽度比CSS宽度要小。`clientWidth/clientHeight` 考虑到这一点。 +还有一个原因：滚动条。有时，没有滚动条的代码工作得很好，因为它在一些浏览器中占据了内容的一部分空间。因此，内容的实际宽度比CSS宽度要小。而 `clientWidth/clientHeight` 考虑到这一点。 -但是，`getComputedStyle(elem).width` 的情况是不同的。一些浏览器（例如Chrome）返回真正的内部宽度，这种情况不考虑滚动条，以及其中一些（例如Firefox）-CSS宽度（忽略滚动条）。这样的跨浏览器差异是不使用 `getComputedStyle` 样式的原因，而是依赖于几何属性。 +但是，`getComputedStyle(elem).width` 的情况是不同的。一些浏览器（例如Chrome）返回真正的内部宽度，这种情况不考虑滚动条，以及其中一些（例如Firefox）-- CSS宽度（忽略滚动条）。这样的跨浏览器差异是不使用 `getComputedStyle` 样式的原因，而是依赖于几何属性。 ```online 如果浏览器保留滚动条的空间（大多数Windows中的浏览器），那么你可以在下面测试它。 @@ -255,19 +255,19 @@ alert( getComputedStyle(elem).width ); // show CSS width for elem 包含文本的元素有这样的样式 `width:300px`. -在桌面Windows操作系统上，Firefox、Chrome、Edgy 都为滚动条保留空间，但Firefox显示 `300px`，而 Chrome 和 Edgy 显示较少。这是因为Firefox返回CSS宽度，其他浏览器返回 “真实” 宽度。 +在桌面 Windows 操作系统上，Firefox、Chrome、Edgy 都为滚动条保留空间，但 Firefox 显示 `300px`，而 Chrome 和 Edgy 显示较少。这是因为 Firefox 返回 CSS 宽度，其他浏览器返回 “真实” 宽度。 ``` 请注意，所描述的差异只是关于从JavaScript读取的 `getComputedStyle(...).width`，而视觉上一切都是正确的。 ## 总结 -元素具有以下几何特性： +元素具有以下几何属性： - `offsetParent` -- 是最近的有定位属性的祖先元素 ，或者是 `td`, `th`, `table`, `body`。 - `offsetLeft/offsetTop` -- 是相对于 `offsetParent`的左上角边缘坐标。 - `offsetWidth/offsetHeight` -- 元素的 "外部" 宽/高 ，边框尺寸计算在内。 -- `clientLeft/clientTop` -- 从元素左上角外部到内部的距离，对于从左到右渲染元素的操作系统，它始终是左/顶部边界的宽度，而相反的操作系统中，垂直滚动条在左边，所以 `clientLeft` 也包括滚动条的宽度。 +- `clientLeft/clientTop` -- 从元素左上角外部到内部的距离，对于从左到右渲染元素的操作系统，它始终是左/顶部边界的宽度，而对于从右到左的操作系统，垂直滚动条在左边，所以 `clientLeft` 也包括滚动条的宽度。 - `clientWidth/clientHeight` -- 内容的宽度/高度，包括内间距，但没有滚动条。 - `scrollWidth/scrollHeight` -- 内容的宽度/高度，包括可滚动的可视区域外的尺寸，也包括内间距，但不包括滚动条。 - `scrollLeft/scrollTop` -- 从左上角开始的元素的滚动部分的宽度/高度。 From 2e145d21f16d8de9c7e42110a8806d4c49b2f833 Mon Sep 17 00:00:00 2001 From: qinjiamei Date: Mon, 3 Sep 2018 12:42:55 +0800 Subject: [PATCH 03/13] 2-ui/1-document/09-size-and-scroll --- .../4-put-ball-in-center/solution.md | 26 +++++++++---------- .../4-put-ball-in-center/task.md | 14 +++++----- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md index 69dec23ce8..5a5f637aba 100644 --- a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md +++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md @@ -1,50 +1,50 @@ -The ball has `position:absolute`. It means that its `left/top` coordinates are measured from the nearest positioned element, that is `#field` (because it has `position:relative`). +为小球设置 `position:absolute`。这意味着它的`left/top` 坐标根据相对它最近的并且设置了定位的元素来测量，这个元素的有效范围就是 `#field`（因为它有 `position:relative`）。 -The coordinates start from the inner left-upper corner of the field: +坐标从设置了相对定位的最近的元素的左上角开始： ![](field.png) -The inner field width/height is `clientWidth/clientHeight`. So the field center has coordinates `(clientWidth/2, clientHeight/2)`. +该元素内容区域的宽/高是 `clientWidth/clientHeight`，所以该元素有效范围的中心的坐标为 `(clientWidth/2, clientHeight/2)`。 -...But if we set `ball.style.left/top` to such values, then not the ball as a whole, but the left-upper edge of the ball would be in the center: +...不过如果我们将 `ball.style.left/top` 设置为上面计算出的值，那么最终的效果与有效范围的中心重合的不是小球的中心，而是小球左上角的坐标： ```js ball.style.left = Math.round(field.clientWidth / 2) + 'px'; ball.style.top = Math.round(field.clientHeight / 2) + 'px'; ``` -Here's how it looks: +这是它将显示出的效果： [iframe height=180 src="ball-half"] -To align the ball center with the center of the field, we should move the ball to the half of its width to the left and to the half of its height to the top: +为了把球中心和有效范围中心对准，我们应该把球移到左边宽度的一半，把 top 设置为有效范围高度的一半： ```js ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px'; ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px'; ``` -**Attention: the pitfall!** +**注意: 陷阱!** -The code won't work reliably while `` has no width/height: +如果 `` 没有宽/高，代码将无法正常工作： ```html ``` -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. +实际使用过程中，浏览器会在图片第一次加载完成后缓存该图片，方便下次再次访问时立即显示图片。I -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 ``: +此时我们应该为 `` 添加 `width/height` 属性： ```html ``` -...Or provide the size in CSS: +...或者在 CSS 中提供尺寸: ```css #ball { diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/task.md b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/task.md index 57746d9217..d46e982d62 100644 --- a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/task.md +++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/task.md @@ -2,19 +2,19 @@ importance: 5 --- -# Place the ball in the field center +# 将小球置于有效范围的中心 -Here's how the source document looks: +这是源文件： [iframe src="source" edit link height=180] -What are coordinates of the field center? +有效范围的中心坐标是多少？ -Calculate them and use to place the ball into the center of the field: +计算并将小球置于有效范围中心： [iframe src="solution" height=180] -- The element should be moved by JavaScript, not CSS. -- The code should work with any ball size (`10`, `20`, `30` pixels) and any field size, not be bound to the given values. +- 元素应该通过 JavaScript 移除，而不是 CSS。 +- 代码应该在不限制小球尺寸（`10`、`20`、`30` 像素）或任何有效范围内的尺寸的情况下正常运行，而不是直接为元素绑定尺寸。 -P.S. Sure, centering could be done with CSS, but here we want exactly JavaScript. Further we'll meet other topics and more complex situations when JavaScript must be used. Here we do a "warm-up". +P.S. 当然了，置中的操作可以通过 CSS 完成，但是这里我们需要通过 JavaScript 完成。此外，当必须使用 JavaScript 时，我们可能会遇到其他话题或更加复杂的情况，这里我们只是做一个 “热身”。 From fe0141a203a354c64cce8b13e0be17b2116d7f3c Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 5 Sep 2018 21:02:33 +0800 Subject: [PATCH 04/13] Update task.md --- .../09-size-and-scroll/6-width-vs-clientwidth/task.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md index a74899552d..23c7b9f2c4 100644 --- a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md +++ b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md @@ -2,8 +2,8 @@ importance: 5 --- -# 不同点: CSS宽度与设备宽度 +# 不同点：CSS 宽度与 clientWidth - `getComputedStyle(elem).width` 与 `elem.clientWidth` 之间的差别在哪? + `getComputedStyle(elem).width` 与 `elem.clientWidth` 之间的差别在哪？ 指出至少三种不同点，越多越好。 From 8bf4b77da74f181722f581385af70fcd074a99c2 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 5 Sep 2018 21:10:23 +0800 Subject: [PATCH 05/13] Update solution.md --- .../4-put-ball-in-center/solution.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md index 5a5f637aba..d250438fc3 100644 --- a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md +++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md @@ -1,4 +1,4 @@ -为小球设置 `position:absolute`。这意味着它的`left/top` 坐标根据相对它最近的并且设置了定位的元素来测量，这个元素的有效范围就是 `#field`（因为它有 `position:relative`）。 +为小球设置 `position:absolute`。这意味着它的 `left/top` 坐标根据相对它最近的并且设置了定位的元素来测量，这个元素的有效范围就是 `#field`（因为它有 `position:relative`）。 坐标从设置了相对定位的最近的元素的左上角开始： @@ -24,7 +24,7 @@ ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px'; ``` -**注意: 陷阱!** +**注意：陷阱！** 如果 `` 没有宽/高，代码将无法正常工作： @@ -34,9 +34,9 @@ ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'p 当浏览器还不知道图片的宽/高（图片的尺寸可能来自标签属性或 CSS）的时候它会假设它们的尺寸为 `0`直到图片加载完成。 -实际使用过程中，浏览器会在图片第一次加载完成后缓存该图片，方便下次再次访问时立即显示图片。I +实际使用过程中，浏览器会在图片第一次加载完成后缓存该图片，方便下次再次访问时立即显示图片。 -但是在第一次加载时 `ball.offsetWidth` 的值为 `0` ，这会导致错误的坐标出现。 +但是在第一次加载时 `ball.offsetWidth` 的值为 `0`，这会导致错误的坐标出现。 此时我们应该为 `` 添加 `width/height` 属性： @@ -44,7 +44,7 @@ ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'p ``` -...或者在 CSS 中提供尺寸: +...或者在 CSS 中提供尺寸： ```css #ball { From 36975e2c99661ebea5212c7430ed57c598ffb17d Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 5 Sep 2018 21:11:16 +0800 Subject: [PATCH 06/13] Update solution.md --- .../09-size-and-scroll/4-put-ball-in-center/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md index d250438fc3..87a501baac 100644 --- a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md +++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md @@ -1,4 +1,4 @@ -为小球设置 `position:absolute`。这意味着它的 `left/top` 坐标根据相对它最近的并且设置了定位的元素来测量，这个元素的有效范围就是 `#field`（因为它有 `position:relative`）。 +为小球设置 `position:absolute`。这意味着它的 `left/top` 坐标根据相对它最近的并且设置了定位的元素来测量，这个元素的有效范围就是 `#field`（因为它有 `position:relative`）。 坐标从设置了相对定位的最近的元素的左上角开始： From a2c377766d0c9b7731fe5e2694198eb06136a0b7 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 5 Sep 2018 21:15:23 +0800 Subject: [PATCH 07/13] Update article.md --- 2-ui/1-document/09-size-and-scroll/article.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/2-ui/1-document/09-size-and-scroll/article.md b/2-ui/1-document/09-size-and-scroll/article.md index 0b034da7e3..61e11af91b 100644 --- a/2-ui/1-document/09-size-and-scroll/article.md +++ b/2-ui/1-document/09-size-and-scroll/article.md @@ -138,7 +138,7 @@ function isHidden(elem) { 有什么区别？ -当文档是从右往左渲染这没什么区别（操作系统是阿拉伯语或希伯来语）此时滚动条不在右边，而是在左边，而 `clientLeft` 则包含了滚动条的宽度。 +当文档是从右向左渲染时就会显现出来（操作系统是阿拉伯语或希伯来语）。此时滚动条不在右边，而是在左边，而 `clientLeft` 则包含了滚动条的宽度。 在这种情况下， `clientLeft` 的值将不是 `25`, 而是加上滚动条的宽度 `25 + 16 = 41`: @@ -246,7 +246,7 @@ alert( getComputedStyle(elem).width ); // show CSS width for elem 还有一个原因：滚动条。有时，没有滚动条的代码工作得很好，因为它在一些浏览器中占据了内容的一部分空间。因此，内容的实际宽度比CSS宽度要小。而 `clientWidth/clientHeight` 考虑到这一点。 -但是，`getComputedStyle(elem).width` 的情况是不同的。一些浏览器（例如Chrome）返回真正的内部宽度，这种情况不考虑滚动条，以及其中一些（例如Firefox）-- CSS宽度（忽略滚动条）。这样的跨浏览器差异是不使用 `getComputedStyle` 样式的原因，而是依赖于几何属性。 +但是，`getComputedStyle(elem).width` 的情况是不同的。一些浏览器（例如Chrome）返回真正的内部宽度，这种情况不考虑滚动条，以及其中一些（例如Firefox）— CSS宽度（忽略滚动条）。这样的跨浏览器差异是不使用 `getComputedStyle` 样式的原因，而是依赖于几何属性。 ```online 如果浏览器保留滚动条的空间（大多数Windows中的浏览器），那么你可以在下面测试它。 @@ -264,12 +264,12 @@ alert( getComputedStyle(elem).width ); // show CSS width for elem 元素具有以下几何属性： -- `offsetParent` -- 是最近的有定位属性的祖先元素 ，或者是 `td`, `th`, `table`, `body`。 -- `offsetLeft/offsetTop` -- 是相对于 `offsetParent`的左上角边缘坐标。 -- `offsetWidth/offsetHeight` -- 元素的 "外部" 宽/高 ，边框尺寸计算在内。 -- `clientLeft/clientTop` -- 从元素左上角外部到内部的距离，对于从左到右渲染元素的操作系统，它始终是左/顶部边界的宽度，而对于从右到左的操作系统，垂直滚动条在左边，所以 `clientLeft` 也包括滚动条的宽度。 -- `clientWidth/clientHeight` -- 内容的宽度/高度，包括内间距，但没有滚动条。 -- `scrollWidth/scrollHeight` -- 内容的宽度/高度，包括可滚动的可视区域外的尺寸，也包括内间距，但不包括滚动条。 -- `scrollLeft/scrollTop` -- 从左上角开始的元素的滚动部分的宽度/高度。 +- `offsetParent` — 是最近的有定位属性的祖先元素 ，或者是 `td`、`th`、`table`、`body`。 +- `offsetLeft/offsetTop` — 是相对于 `offsetParent`的左上角边缘坐标。 +- `offsetWidth/offsetHeight` — 元素的“外部”宽/高 ，边框尺寸计算在内。 +- `clientLeft/clientTop` — 从元素左上角外部到内部的距离，对于从左到右渲染元素的操作系统，它始终是左/顶部边界的宽度，而对于从右到左的操作系统，垂直滚动条在左边，所以 `clientLeft` 也包括滚动条的宽度。 +- `clientWidth/clientHeight` — 内容的宽度/高度，包括内间距，但没有滚动条。 +- `scrollWidth/scrollHeight` — 内容的宽度/高度，包括可滚动的可视区域外的尺寸，也包括内间距，但不包括滚动条。 +- `scrollLeft/scrollTop` — 从左上角开始的元素的滚动部分的宽度/高度。 除了 `scrollLeft/scrollTop` 之外，所有属性都是只读的。如果更改，浏览器会使元素滚动。 From 4016fe5ae2070f77174a5ccb7122c6c5986194f9 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 5 Sep 2018 21:16:52 +0800 Subject: [PATCH 08/13] Update solution.md --- .../09-size-and-scroll/6-width-vs-clientwidth/solution.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md index b89109baec..bffb8be091 100644 --- a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md +++ b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md @@ -1,6 +1,6 @@ -不同点: +不同点： -1. `clientWidth` 值是数值, 然而 `getComputedStyle(elem).width` 返回一个包含 `px` 的字符串。 +1. `clientWidth` 值是数值，然而 `getComputedStyle(elem).width` 返回一个包含 `px` 的字符串。 2. `getComputedStyle` 可能返回非数值的结果，例如内联元素的 `"auto"`。 -3. `clientWidth` 是元素的内部内容区域加上内间距，而CSS宽度（具有标准的 `box-sizing`）是内部 * 不包括内间距 * 的空间区域。 -4. 如果有一个滚动条，一般浏览器保留它的空间，有的浏览器从CSS宽度中减去这个空间（因为它不再用于内容），而有些则不这样做。`clientWidth` 属性总是相同的：如果保留了滚动条，那么它的宽度将被删去。 \ No newline at end of file +3. `clientWidth` 是元素的内部内容区域加上内间距，而 CSS 宽度（具有标准的 `box-sizing`）是内部 * 不包括内间距 * 的空间区域。 +4. 如果有一个滚动条，一般浏览器保留它的空间，有的浏览器从 CSS 宽度中减去这个空间（因为它不再用于内容），而有些则不这样做。`clientWidth` 属性总是相同的：如果保留了滚动条，那么它的宽度将被删去。 From 655927c85a6681f08a1771946196dfbfd46c1034 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 5 Sep 2018 21:17:16 +0800 Subject: [PATCH 09/13] Update solution.md --- .../09-size-and-scroll/6-width-vs-clientwidth/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md index bffb8be091..2e3860fc85 100644 --- a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md +++ b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md @@ -2,5 +2,5 @@ 1. `clientWidth` 值是数值，然而 `getComputedStyle(elem).width` 返回一个包含 `px` 的字符串。 2. `getComputedStyle` 可能返回非数值的结果，例如内联元素的 `"auto"`。 -3. `clientWidth` 是元素的内部内容区域加上内间距，而 CSS 宽度（具有标准的 `box-sizing`）是内部 * 不包括内间距 * 的空间区域。 +3. `clientWidth` 是元素的内部内容区域加上内间距，而 CSS 宽度（具有标准的 `box-sizing`）是内部**不包括内间距**的空间区域。 4. 如果有一个滚动条，一般浏览器保留它的空间，有的浏览器从 CSS 宽度中减去这个空间（因为它不再用于内容），而有些则不这样做。`clientWidth` 属性总是相同的：如果保留了滚动条，那么它的宽度将被删去。 From b4ffb8e44b17a304e7bcd5e345c8b9d286f3b74f Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 5 Sep 2018 21:20:22 +0800 Subject: [PATCH 10/13] Update task.md --- .../09-size-and-scroll/6-width-vs-clientwidth/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md index 23c7b9f2c4..30a5de8497 100644 --- a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md +++ b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md @@ -4,6 +4,6 @@ importance: 5 # 不同点：CSS 宽度与 clientWidth - `getComputedStyle(elem).width` 与 `elem.clientWidth` 之间的差别在哪？ +`getComputedStyle(elem).width` 与 `elem.clientWidth` 之间的差别在哪？ 指出至少三种不同点，越多越好。 From 2ef17a1582c16c79642f2e49d140529f6b3d015d Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 5 Sep 2018 21:31:54 +0800 Subject: [PATCH 11/13] Update article.md --- 2-ui/1-document/09-size-and-scroll/article.md | 88 +++++++++---------- 1 file changed, 44 insertions(+), 44 deletions(-) diff --git a/2-ui/1-document/09-size-and-scroll/article.md b/2-ui/1-document/09-size-and-scroll/article.md index 61e11af91b..6c553af3d5 100644 --- a/2-ui/1-document/09-size-and-scroll/article.md +++ b/2-ui/1-document/09-size-and-scroll/article.md @@ -1,8 +1,8 @@ # 元素的尺寸与滚动 -JavaScript中存在许多属性让我们能够读取元素的宽度、高度或其他具有几何特征的信息。 +JavaScript 中存在许多属性让我们能够读取元素的宽度、高度或其他具有几何特征的信息。 -在移动或定位JavaScript元素时，我们经常需要它们来计算元素的坐标。 +在移动或定位 JavaScript 元素时，我们经常需要它们来计算元素的坐标。 ## 示例元素 @@ -32,14 +32,14 @@ JavaScript中存在许多属性让我们能够读取元素的宽度、高度或 你可以 [在sandbox中打开文档](sandbox:metric). -```smart header=" 注意滚动条 " +```smart header="注意滚动条" 上例图片演示了当元素有滚动条时最复杂的情况，一些浏览器（不是全部）通过牺牲内容空间来保留滚动条。 -因此，没有滚动条时，内容宽度将是 `300 px`，但是如果滚动条宽度是 `16px`（不同的设备和浏览器，宽度可能会不一样），那么还剩下`300 - 16＝280px`，这是我们必须考虑到的事。这就是为什么本章的例子总是假设有滚动条的原因。如果没有滚动条，那么事情就会更简单一些。 +因此，没有滚动条时，内容宽度将是 `300 px`，但是如果滚动条宽度是 `16px`（不同的设备和浏览器，宽度可能会不一样），那么还剩下 `300 - 16＝280px`，这是我们必须考虑到的事。这就是为什么本章的例子总是假设有滚动条的原因。如果没有滚动条，那么事情就会更简单一些。 ``` -```smart header=" 文本可能会溢出到 `padding-bottom` 中 " -内填充通常在插图中显示的是空的，但是如果元素中有很多文本，并且溢出，那么浏览器在 `padding-bottom` 中显示 “溢出” 文本，这可以在示例中看到。但是填充物仍然存在，除非另有说明。 +```smart header="文本可能会溢出到 `padding-bottom` 中" +内填充通常在插图中显示的是空的，但是如果元素中有很多文本，并且溢出，那么浏览器在 `padding-bottom` 中显示“溢出”文本，这可以在示例中看到。但是填充物仍然存在，除非另有说明。 ``` ## 几何学 @@ -60,13 +60,13 @@ JavaScript中存在许多属性让我们能够读取元素的宽度、高度或 `offsetParent` 是最近的祖先元素: -1. CSS定位 (`position` 为 `absolute`、`relative` 或 `fixed`), -2. 或者 `
`、 ``、 ``, -2. 或者 ``. +1. CSS 定位（`position` 为 `absolute`、`relative` 或 `fixed`）， +2. 或者 `
`、``、``， +2. 或者 ``。 -在大多数实际情况下，我们可以使用 `offsetParent` 来获得最近的CSS定位祖先。`offsetLeft/offsetTop` 提供相对于元素左上角的x/y坐标。 +在大多数实际情况下，我们可以使用 `offsetParent` 来获得最近的 CSS 定位祖先。`offsetLeft/offsetTop` 提供相对于元素左上角的 x/y 坐标。 -在下面的例子中，内部 `
` 有`
` 作为 `offsetParent` ，并且 `offsetLeft/offsetTop` 让它从左上角位移 (`180`): +在下面的例子中，内部 `
` 有 `
` 作为 `offsetParent`，并且 `offsetLeft/offsetTop` 让它从左上角位移（`180`）： ```html run height=10
@@ -84,31 +84,31 @@ JavaScript中存在许多属性让我们能够读取元素的宽度、高度或 ![](metric-offset-parent.png) -有以下几种情况 `offsetParent` 的值为 `null`: +有以下几种情况 `offsetParent` 的值为 `null`： -1. 未显示的元素 (`display:none` 或者不在文档中). -2. `` 与 ``. -3. `position:fixed` 的元素. +1. 未显示的元素（`display:none` 或者不在文档中）。 +2. `` 与 ``。 +3. `position:fixed` 的元素。 ## offsetWidth/Height 现在让我们关注元素本身。 -这两个属性是最简单的。它们提供元素的 “外部” 宽度/高度。换句话说，它的完整大小包括边框。 +这两个属性是最简单的。它们提供元素的“外部”宽度/高度。换句话说，它的完整大小包括边框。 ![](metric-offset-width-height.png) 在我们的示例元素中： -- `offsetWidth = 390` -- 外部宽度，计算方法是内部css宽度 (`300px`) 加上内填充 (`2 * 20px`) 和边框宽度 (`2 * 25px`). -- `offsetHeight = 290` -- 外部高度. +- `offsetWidth = 390` — 外部宽度，计算方法是内部 css 宽度（`300px`）加上内填充（`2 * 20px`）和边框宽度（`2 * 25px`）。 +- `offsetHeight = 290` — 外部高度。 -````smart header=" 未显示的几何元素的属性值为 0/null " +````smart header="未显示的几何元素的属性值为 0/null" 几何属性仅为显示出来的元素计算。 如果元素（或其任何祖先）在文档中显示为 `display:none` 或本身不在文档中，则所有几何属性都是 0 或者值为 `null`，这取决于它是什么。 -例如，`offsetParent` 为 `null`, 并且 `offsetWidth`, `offsetHeight` 为 `0`. +例如，`offsetParent` 为 `null`，并且 `offsetWidth`，`offsetHeight` 为 `0`。 我们可以用它来检查一个元素是否被隐藏，像这样： @@ -118,19 +118,19 @@ function isHidden(elem) { } ``` -请注意，`isHidden` 返回 `true` 表示元素不在页面中显示, 但不代表尺寸为 0 (like an empty `
`). +请注意，`isHidden` 返回 `true` 表示元素不在页面中显示，但不代表尺寸为 0（like an empty `
`）。 ```` ## clientTop/Left 在元素内部，我们有边框。 -要测量它们，可使用 `clientTop` 和 `clientLeft`. +要测量它们，可使用 `clientTop` 和 `clientLeft`。 在例子中： -- `clientLeft = 25` -- 左边框宽度 -- `clientTop = 25` -- 上边框宽度 +- `clientLeft = 25` — 左边框宽度 +- `clientTop = 25` — 上边框宽度 ![](metric-client-left-top.png) @@ -140,7 +140,7 @@ function isHidden(elem) { 当文档是从右向左渲染时就会显现出来（操作系统是阿拉伯语或希伯来语）。此时滚动条不在右边，而是在左边，而 `clientLeft` 则包含了滚动条的宽度。 -在这种情况下， `clientLeft` 的值将不是 `25`, 而是加上滚动条的宽度 `25 + 16 = 41`: +在这种情况下，`clientLeft` 的值将不是 `25`，而是加上滚动条的宽度 `25 + 16 = 41`： ![](metric-client-left-top-rtl.png) @@ -152,11 +152,11 @@ function isHidden(elem) { ![](metric-client-width-height.png) -在上面的图片中，我们首先考虑 `clientHeight`：这很容易计算。没有水平滚动条，所以它正好是边界内的总和：CSS高度 `200px` 加上顶部和底部的内填充宽度（`2 * 20px`），总计 `240px`。 +在上面的图片中，我们首先考虑 `clientHeight`：这很容易计算。没有水平滚动条，所以它正好是边界内的总和：CSS 高度 `200px` 加上顶部和底部的内填充宽度（`2 * 20px`），总计 `240px`。 -这种情况下的 `clientWidth` -- 这里的内容宽度不是 `300px`, 而是`284px`, 因为 `16px` 是滚动条的宽度。所以加起来就是 `284px` 加上左右内间距，总和 `324px`. +这种情况下的 `clientWidth` — 这里的内容宽度不是 `300px`，而是`284px`，因为 `16px` 是滚动条的宽度。所以加起来就是 `284px` 加上左右内间距，总和 `324px`。 -**如果没有内间距，那么 `clientWidth/Height` 就是代表内容的宽度, 这里的内容指的是内间距和滚动条以内 (如果还有其他的).** +**如果没有内间距，那么 `clientWidth/Height` 就是代表内容的宽度, 这里的内容指的是内间距和滚动条以内 (如果还有其他的)。** ![](metric-client-width-nopadding.png) @@ -171,8 +171,8 @@ function isHidden(elem) { 上图： -- `scrollHeight = 723` -- 是内容区域的完整内部高度，包括滚动部分。 -- `scrollWidth = 324` -- 是完整的内部宽度，这里没有水平滚动条，所以它等于 `clientWidth`。 +- `scrollHeight = 723` — 是内容区域的完整内部高度，包括滚动部分。 +- `scrollWidth = 324` — 是完整的内部宽度，这里没有水平滚动条，所以它等于 `clientWidth`。 我们可以使用这些属性将元素扩展到其完全宽度/高度。 @@ -199,13 +199,13 @@ element.style.height = `${element.scrollHeight}px`; ![](metric-scroll-top.png) -换种说法，`scrollTop`就是 “滚动了多少” 的意思。 +换种说法，`scrollTop` 就是 “滚动了多少” 的意思。 ````smart header="`scrollLeft/scrollTop` 可修改 " 大多数几何属性是只读的，但是 `scrollLeft/scrollTop` 可以改变，浏览器将会直接滚动元素。 ```online -如果单击下面的元素，代码 `elem.scrollTop += 10` 将会执行，这使得元素向下滚动 `10px`。 +如果单击下面的元素，代码 `elem.scrollTop += 10` 将会执行，这使得元素向下滚动 `10px`。
Click
Me
1
2
3
4
5
6
7
8
9
``` @@ -215,7 +215,7 @@ element.style.height = `${element.scrollHeight}px`; ## 不要从 CSS 中获取宽高 -我们刚刚介绍了DOM元素的几何属性。它们通常用于获得宽度、高度和计算距离。 +我们刚刚介绍了 DOM 元素的几何属性。它们通常用于获得宽度、高度和计算距离。 但是，正如我们从《信息：样式和类》一章所知道的，我们可以使用 `getComputedStyle` 来读取CSS的高度和宽度。 @@ -229,8 +229,8 @@ alert( getComputedStyle(elem).width ); // show CSS width for elem 为什么我们应该使用几何属性呢？有两个原因： -1. 首先，CSS宽度/高度取决于另一个属性：`box-sizing`，它定义了 “什么是” CSS宽度和高度。用作CSS样式的 `box-sizing` 的更改可能会破坏这样的 JavaScript 定义。 -2. 其次，CSS的 `width/height` 可能是 `auto` ，例如内联元素： +1. 首先，CSS 宽度/高度取决于另一个属性：`box-sizing`，它定义了 “什么是” CSS 宽度和高度。用作 CSS 样式的 `box-sizing` 的更改可能会破坏这样的 JavaScript 定义。 +2. 其次，CSS 的 `width/height` 可能是 `auto`，例如内联元素： ```html run Hello! @@ -242,30 +242,30 @@ alert( getComputedStyle(elem).width ); // show CSS width for elem ``` - 从CSS的观点来看，`width:auto` 是完全正常的，但是在JavaScript中，我们需要一个精确的 `px` 大小，以便我们在计算过程中使用它，所以CSS宽度根本没用。 + 从 CSS 的观点来看，`width:auto` 是完全正常的，但是在 JavaScript 中，我们需要一个精确的 `px` 大小，以便我们在计算过程中使用它，所以 CSS 宽度根本没用。 -还有一个原因：滚动条。有时，没有滚动条的代码工作得很好，因为它在一些浏览器中占据了内容的一部分空间。因此，内容的实际宽度比CSS宽度要小。而 `clientWidth/clientHeight` 考虑到这一点。 +还有一个原因：滚动条。有时，没有滚动条的代码工作得很好，因为它在一些浏览器中占据了内容的一部分空间。因此，内容的实际宽度比 CSS 宽度要小。而 `clientWidth/clientHeight` 考虑到这一点。 -但是，`getComputedStyle(elem).width` 的情况是不同的。一些浏览器（例如Chrome）返回真正的内部宽度，这种情况不考虑滚动条，以及其中一些（例如Firefox）— CSS宽度（忽略滚动条）。这样的跨浏览器差异是不使用 `getComputedStyle` 样式的原因，而是依赖于几何属性。 +但是，`getComputedStyle(elem).width` 的情况是不同的。一些浏览器（例如 Chrome）返回真正的内部宽度，这种情况不考虑滚动条，以及其中一些（例如Firefox）— CSS 宽度（忽略滚动条）。这样的跨浏览器差异是不使用 `getComputedStyle` 样式的原因，而是依赖于几何属性。 ```online -如果浏览器保留滚动条的空间（大多数Windows中的浏览器），那么你可以在下面测试它。 +如果浏览器保留滚动条的空间（大多数 Windows 中的浏览器），那么你可以在下面测试它。 [iframe src="cssWidthScroll" link border=1] -包含文本的元素有这样的样式 `width:300px`. +包含文本的元素有这样的样式 `width:300px`。 -在桌面 Windows 操作系统上，Firefox、Chrome、Edgy 都为滚动条保留空间，但 Firefox 显示 `300px`，而 Chrome 和 Edgy 显示较少。这是因为 Firefox 返回 CSS 宽度，其他浏览器返回 “真实” 宽度。 +在桌面 Windows 操作系统上，Firefox、Chrome、Edgy 都为滚动条保留空间，但 Firefox 显示 `300px`，而 Chrome 和 Edgy 显示较少。这是因为 Firefox 返回 CSS 宽度，其他浏览器返回“真实”宽度。 ``` -请注意，所描述的差异只是关于从JavaScript读取的 `getComputedStyle(...).width`，而视觉上一切都是正确的。 +请注意，所描述的差异只是关于从 JavaScript 读取的 `getComputedStyle(...).width`，而视觉上一切都是正确的。 ## 总结 元素具有以下几何属性： -- `offsetParent` — 是最近的有定位属性的祖先元素 ，或者是 `td`、`th`、`table`、`body`。 -- `offsetLeft/offsetTop` — 是相对于 `offsetParent`的左上角边缘坐标。 +- `offsetParent` — 是最近的有定位属性的祖先元素，或者是 `td`、`th`、`table`、`body`。 +- `offsetLeft/offsetTop` — 是相对于 `offsetParent` 的左上角边缘坐标。 - `offsetWidth/offsetHeight` — 元素的“外部”宽/高 ，边框尺寸计算在内。 - `clientLeft/clientTop` — 从元素左上角外部到内部的距离，对于从左到右渲染元素的操作系统，它始终是左/顶部边界的宽度，而对于从右到左的操作系统，垂直滚动条在左边，所以 `clientLeft` 也包括滚动条的宽度。 - `clientWidth/clientHeight` — 内容的宽度/高度，包括内间距，但没有滚动条。 From 9032e2d1e01c5aeff947a54733ac564fdb218771 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 5 Sep 2018 21:32:42 +0800 Subject: [PATCH 12/13] Update solution.md --- .../09-size-and-scroll/1-get-scroll-height-bottom/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md index 45f1d5c5cf..e4c3e0228a 100644 --- a/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md +++ b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md @@ -4,4 +4,4 @@ let scrollBottom = elem.scrollHeight - elem.scrollTop - elem.clientHeight; ``` -换句话说：（完全高度）减去（已滚动的高度）减去（可见部分的高度）--得到的结果就是下方隐藏部分的高度。 +换句话说：（完全高度）减去（已滚动的高度）减去（可见部分的高度）— 得到的结果就是下方隐藏部分的高度。 From 1c7dd271af37477be346d50f511e767632554dd9 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 5 Sep 2018 21:33:04 +0800 Subject: [PATCH 13/13] Update task.md --- .../09-size-and-scroll/1-get-scroll-height-bottom/task.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md index 2764b601ab..afe70d13c6 100644 --- a/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md +++ b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md @@ -4,8 +4,8 @@ importance: 5 # 相对于底部滚动了多少？ - `elem.scrollTop` 属性是从顶部滚动出来的部分的大小，何获得 `scrollBottom`——从底部滚动的尺寸？ + `elem.scrollTop` 属性是从顶部滚动出来的部分的大小，何获得 `scrollBottom` —— 从底部滚动的尺寸？ 编写适用于任意元素的代码。 -P.S. 请检查您的代码：如果没有滚动条或元素完全向下滚动，那么它应该返回“0”。 +P.S. 请检查您的代码：如果没有滚动条或元素完全向下滚动，那么它应该返回 “0”。