diff --git a/2-ui/1-document/08-styles-and-classes/2-create-notification/task.md b/2-ui/1-document/08-styles-and-classes/2-create-notification/task.md index ccc7a01dbf..a9e3e49643 100644 --- a/2-ui/1-document/08-styles-and-classes/2-create-notification/task.md +++ b/2-ui/1-document/08-styles-and-classes/2-create-notification/task.md @@ -2,9 +2,9 @@ importance: 5 --- -# 创建通知 +# 创建一个通知 -编写 `showNotification(options)` 通知函数：`

` 包含给定内容。通知应该在 1.5 秒后自动消失。 +编写一个函数 `showNotification(options)`：该函数创建一个带有给定内容的通知 `

`。该通知应该在 1.5 秒后自动消失。参数： @@ -21,4 +21,4 @@ showNotification({ [demo src="solution"] -使用 CSS 定位在给定 top/right 坐标处显示元素。源文档已经提供了必要的样式。 +使用 CSS 定位在给定的 top/right 坐标处显示元素。源文档已经提供了必要的样式。 diff --git a/2-ui/1-document/08-styles-and-classes/article.md b/2-ui/1-document/08-styles-and-classes/article.md index ee8d93109b..daf2cc9657 100644 --- a/2-ui/1-document/08-styles-and-classes/article.md +++ b/2-ui/1-document/08-styles-and-classes/article.md @@ -1,34 +1,35 @@ # 样式和类 -在我们讨论 JavaScript 处理样式和类的方法之前 —— 有一个重要的规则。尽管这足够明显的，但我们还是要提到这一点。 +在我们讨论 JavaScript 处理样式和类的方法之前 — 有一个重要的规则。希望它足够明显，但是我们仍然必须提到它。 -通常有两种方式来设计元素样式： +通常有两种设置元素样式的方式： -1. 在 CSS 中创建一个类并添加它：`

` +1. 在 CSS 中创建一个类，并添加它：`

` 2. 将属性直接写入 `style`：`

`。 -CSS 总是首选的方式 —— 不仅用于 HTML，在 JavaScript 中也是如此。 +JavaScript 既可以修改类，也可以修改 `style` 属性。 -只有当类“无法处理时”，我们才会操作 `style` 属性。 +相较于将样式写入 `style` 属性，我们应该首选通过 CSS 类的方式来添加样式。仅当类“无法处理”时，才应选择使用 `style` 属性的方式。 -例如，如果我们动态地计算元素的坐标并希望通过 JavaScript 来设置它们，那么 `style` 是可接受的，如下所示： +例如，如果我们动态地计算元素的坐标，并希望通过 JavaScript 来设置它们，那么使用 `style` 是可以接受的，如下所示： ```js -let top = /* complex calculations */; -let left = /* complex calculations */; -elem.style.left = left; // e.g '123px' -elem.style.top = top; // e.g '456px' +let top = /* 复杂的计算 */; +let left = /* 复杂的计算 */; + +elem.style.left = left; // 例如 '123px'，在运行时计算出的 +elem.style.top = top; // 例如 '456px' ``` -对于其他情况，比如文本变红色，添加一个背景图标 —— 在 CSS 中描述这个图标，然后应用这个类。这更加灵活，更容易支持。 +对于其他情况，例如将文本设为红色，添加一个背景图标 — 可以在 CSS 中对这些样式进行描述，然后添加类（JavaScript 可以做到）。这样更灵活，更易于支持。 -## className and classList +## className 和 classList -更改类在脚本中是最常见的一个操作。 +更改类是脚本中最常见的操作之一。 -在以前，JavaScript 有一个限制：像 `"class"` 这样的保留字不能作为对象属性。这一限制现在已经不存在了，但当时并不存在像 `elem.class` 这样的 `"class"` 属性。 +在很旧以前，JavaScript 中有一个限制：像 `"class"` 这样的保留字不能用作对象的属性。这一限制现在已经不存在了，但当时就不能存在像 `elem.class` 这样的 `"class"` 属性。 -因此对于类，引入了类似的属性 `"className"`： `elem.className` 对应于 `"class"` 特性: +因此，对于类，引入了看起来类似的属性 `"className"`：`elem.className` 对应于 `"class"` 特性（attribute）。例如： @@ -40,11 +41,11 @@ elem.style.top = top; // e.g '456px' ``` -如果我们为 `elem.className` 分配一些东西，它将替换所有的类字符串。有时，这正是我们所需要的，但我们通常希望添加/删除单个类。 +如果我们对 `elem.className` 进行赋值，它将替换类中的整个字符串。有时，这正是我们所需要的，但通常我们希望添加/删除单个类。 -还有另一个属性：`elem.classList`。 +这里还有另一个属性：`elem.classList`。 -`elem.classList` 是一个特殊对象，它拥有 `add/remove/toggle` 的类方法。 +`elem.classList` 是一个特殊的对象，它具有 `add/remove/toggle` 单个类的方法。例如： @@ -52,7 +53,7 @@ elem.style.top = top; // e.g '456px' @@ -83,9 +84,9 @@ elem.style.top = top; // e.g '456px' ## 元素样式 -`elem.style` 属性是一个对象，它对应于 `"style"` 特性中所写的内容。对 `elem.style.width="100px"` 等价于 `style="width:100px"` 的运行效果。 +`elem.style` 属性是一个对象，它对应于 `"style"` 特性（attribute）中所写的内容。`elem.style.width="100px"` 的效果等价于我们在 `style` 中有一个 `width:100px` 字符串。 -对于多单词，使用 camelCase： +对于多词（multi-word）属性，使用驼峰式 camelCase： ```js no-beautify background-color => elem.style.backgroundColor @@ -99,44 +100,44 @@ border-left-width => elem.style.borderLeftWidth document.body.style.backgroundColor = prompt('background color?', 'green'); ``` -````smart header="Prefixed properties" -像 `-moz-border-radius`，`-webkit-border-radius` 这样的浏览器前缀，也遵循同样的规则，比如： +````smart header="前缀属性" +像 `-moz-border-radius` 和 `-webkit-border-radius` 这样的浏览器前缀属性，也遵循同样的规则：连字符 `"-"` 表示大写。 + +例如： ```js button.style.MozBorderRadius = '5px'; button.style.WebkitBorderRadius = '5px'; ``` - -即：连字符 `"-"` 变成大写。 ```` ## 重置样式属性 -有时我们想要分配一个样式属性，然后移除它。 +有时我们想要分配一个样式属性，稍后移除它。例如，为了隐藏一个元素，我们可以设置 `elem.style.display = "none"`。 -然后，我们可能要移除 `style.display`，就像它没有被设置一样。这里不应该使用 `delete elem.style.display`，而应该使用 `elem.style.display = ""` 将其赋值为空。 +然后，稍后我们可能想要移除 `style.display`，就像它没有被设置一样。这里不应该使用 `delete elem.style.display`，而应该使用 `elem.style.display = ""` 将其赋值为空。 ```js run -// if we run this code, the "blinks" -document.body.style.display = "none"; // hide +// 如果我们运行这段代码，将会闪烁 +document.body.style.display = "none"; // 隐藏 setTimeout(() => document.body.style.display = "", 1000); // 恢复正常 ``` -如果我们设置 `display` 为空字符串，那么浏览器一般会应用 CSS 类以及内置样式，就像根本没有这样的 `style` 属性。 +如果我们将 `display` 设置为空字符串，那么浏览器通常会应用 CSS 类以及内置样式，就好像根本没有这样的 `style` 属性一样。 -````smart header="用 `style.cssText` 进行重写" -通常，我们使用 `style.*` 来分配单独的样式属性。我们不能将完整的样式设置为 `div.style="color: red; width: 100px"`，因为 `div.style` 是一个对象，而且它是只读的。 +````smart header="用 `style.cssText` 进行完全的重写" +通常，我们使用 `style.*` 来对各个样式属性进行赋值。我们不能像这样的 `div.style="color: red; width: 100px"` 设置完整的属性，因为 `div.style` 是一个对象，并且它是只读的。 -以字符串的形式设置样式，可以使用特殊属性 `style.cssText`： +想要以字符串的形式设置完整的样式，可以使用特殊属性 `style.cssText`： ```html run

Button

``` -我们很少使用它，因为这样的赋值会删除所有现有样式：它不会添加，而是替换它们。偶尔会移出所需的东西。但是当我们知道我们不移出一些重要的内容时，仍然可以对新元素进行处理。 +我们很少使用这个属性，因为这样的赋值会删除所有现有样式：它不是进行添加，而是替换它们。有时可能会删除所需的内容。但是，当我们知道我们不会删除现有样式时，可以安全地将其用于新元素。 -通过设置属性：`div.setAttribute('style', 'color: red...')` 也可以实现同样的目的。 +可以通过设置一个特性（attribute）来实现同样的效果：`div.setAttribute('style', 'color: red...')`。 ```` ## 注意单位 -样式值中必须附上 CSS 单位。 +不要忘记将 CSS 单位添加到值上。 -例如，我们不应该将 `elem.style.top` 设置为 `10`，而应将其设置为 `10px`。否则会无效： +例如，我们不应该将 `elem.style.top` 设置为 `10`，而应将其设置为 `10px`。否则设置会无效： ```html run height=100 ``` -...但如果我们需要，比如说，把边距增加 20px 呢？那么需要当前值作为开始。 +……但如果我们需要，例如，将 margin 增加 20px 呢？那么我们需要 margin 的当前值。 -还有另一种方法：`getComputedStyle`。 +对于这个需求，这里有另一种方法：`getComputedStyle`。 -语法是： +语法如下： ```js -getComputedStyle(element[, pseudo]) +getComputedStyle(element, [pseudo]) ``` element -: 用来读取样式值的的元素。 +: 需要被读取样式值的元素。 pseudo -: 假如给定一个伪元素，例如：`::before`。空字符串或无参意味着元素本身。 +: 伪元素（如果需要），例如 `::before`。空字符串或无参数则意味着元素本身。结果是一个具有样式属性的对象，像 `elem.style`，但现在对于所有的 CSS 类来说都是如此。 @@ -236,7 +237,7 @@ pseudo