zh-cn: Format /web/api using Prettier (part 4)

mdn · Jul 28, 2023 · 1d629e9 · 1d629e9
1 parent 09c0ef4
commit 1d629e9
Show file tree

Hide file tree

Showing 100 changed files with 1,083 additions and 918 deletions.
diff --git a/files/zh-cn/web/api/element/childelementcount/index.md b/files/zh-cn/web/api/element/childelementcount/index.md
@@ -5,7 +5,7 @@ slug: Web/API/Element/childElementCount
 
 {{ APIRef("DOM") }}
 
-**`Element.childElementCount`** 只读属性返回一个***无符号长整型数字***，表示给定元素的子元素数。
+**`Element.childElementCount`** 只读属性返回一个**_无符号长整型数字_**，表示给定元素的子元素数。
 
 > **备注：** This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("Element")}} and {{domxref("ChildNode")}}. In this case, `childElementCount` moved to {{domxref("Element")}}. This is a fairly technical change that shouldn't affect compatibility.
 

diff --git a/files/zh-cn/web/api/element/children/index.md b/files/zh-cn/web/api/element/children/index.md
@@ -25,17 +25,15 @@ var elList = elementNodeReference.children;
 
 ```js
 // parg 是一个指向<p>元素的对象引用
-if (parg.childElementCount)
-// 检查这个<p>元素是否有子元素
-// 译者注:childElementCount 有兼容性问题
- {
-   var children = parg.children;
-   for (var i = 0; i < children.length; i++)
-   {
-   // 通过 children[i] 来获取每个子元素
-   // 注意:List 是一个 live 的 HTMLCollection 对象，在这里添加或删除 parg 的子元素节点，都会立即改变 List 的值。
-   };
- };
+if (parg.childElementCount) {
+  // 检查这个<p>元素是否有子元素
+  // 译者注:childElementCount 有兼容性问题
+  var children = parg.children;
+  for (var i = 0; i < children.length; i++) {
+    // 通过 children[i] 来获取每个子元素
+    // 注意:List 是一个 live 的 HTMLCollection 对象，在这里添加或删除 parg 的子元素节点，都会立即改变 List 的值。
+  }
+}
 ```
 
 ## 规范

diff --git a/files/zh-cn/web/api/element/classlist/index.md b/files/zh-cn/web/api/element/classlist/index.md
@@ -18,8 +18,8 @@ slug: Web/API/Element/classList
 ## 示例
 
 ```js
-const div = document.createElement('div');
-div.className = 'foo';
+const div = document.createElement("div");
+div.className = "foo";
 
 // 初始状态：<div class="foo"></div>
 console.log(div.outerHTML);
@@ -35,7 +35,7 @@ console.log(div.outerHTML);
 div.classList.toggle("visible");
 
 // add/remove visible, depending on test conditional, i less than 10
-div.classList.toggle("visible", i < 10 );
+div.classList.toggle("visible", i < 10);
 
 console.log(div.classList.contains("foo"));
 

diff --git a/files/zh-cn/web/api/element/click_event/index.md b/files/zh-cn/web/api/element/click_event/index.md
@@ -16,9 +16,9 @@ slug: Web/API/Element/click_event
 在类似 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 这样的方法中使用事件名称，或设置事件处理器属性。
 
 ```js
-addEventListener('click', (event) => {});
+addEventListener("click", (event) => {});
 
-onclick = (event) => { };
+onclick = (event) => {};
 ```
 
 ## 事件类型
@@ -130,9 +130,9 @@ Safari 手机版里，以下元素是交互式的（因此不会受到上述错
 ### JavaScript
 
 ```js
-const button = document.querySelector('button');
+const button = document.querySelector("button");
 
-button.addEventListener('click', (event) => {
+button.addEventListener("click", (event) => {
   button.textContent = `Click count: ${event.detail}`;
 });
 ```

diff --git a/files/zh-cn/web/api/element/clienttop/index.md b/files/zh-cn/web/api/element/clienttop/index.md
@@ -27,7 +27,7 @@ Cat image and text coming from [www.best-cat-art.com](http://www.best-cat-art.co
 
 padding-bottom
 
-**Left**、**Top**、**Right**、**Bottom**、_margin-top_、*margin-bottom*、*border-top*、_border-bottom_
+**Left**、**Top**、**Right**、**Bottom**、_margin-top_、_margin-bottom_、_border-top_、_border-bottom_
 
 ## 备注
 

diff --git a/files/zh-cn/web/api/element/closest/index.md b/files/zh-cn/web/api/element/closest/index.md
@@ -32,8 +32,10 @@ var closestElement = targetElement.closest(selectors);
 
 ```html
 <article>
-  <div id="div-01">Here is div-01
-    <div id="div-02">Here is div-02
+  <div id="div-01">
+    Here is div-01
+    <div id="div-02">
+      Here is div-02
       <div id="div-03">Here is div-03</div>
     </div>
   </div>
@@ -43,7 +45,7 @@ var closestElement = targetElement.closest(selectors);
 ### JavaScript
 
 ```js
-var el = document.getElementById('div-03');
+var el = document.getElementById("div-03");
 
 var r1 = el.closest("#div-02");
 // 返回 id 为 div-02 的那个元素
@@ -64,36 +66,36 @@ var r4 = el.closest(":not(div)");
 
 ```js
 if (!Element.prototype.matches)
-    Element.prototype.matches = Element.prototype.msMatchesSelector ||
-                                Element.prototype.webkitMatchesSelector;
+  Element.prototype.matches =
+    Element.prototype.msMatchesSelector ||
+    Element.prototype.webkitMatchesSelector;
 
 if (!Element.prototype.closest)
-    Element.prototype.closest = function(s) {
-        var el = this;
-        if (!document.documentElement.contains(el)) return null;
-        do {
-            if (el.matches(s)) return el;
-            el = el.parentElement;
-        } while (el !== null);
-        return null;
-    };
+  Element.prototype.closest = function (s) {
+    var el = this;
+    if (!document.documentElement.contains(el)) return null;
+    do {
+      if (el.matches(s)) return el;
+      el = el.parentElement;
+    } while (el !== null);
+    return null;
+  };
 ```
 
 然而，如果你需要兼容到 IE8，那么随后这个 polyfill 将会非常缓慢地运行到结束。并且，IE8 只支持 CSS2.1 的选择器，并且使网页运行非常缓慢。
 
 ```js
 if (window.Element && !Element.prototype.closest) {
-    Element.prototype.closest =
-    function(s) {
-        var matches = (this.document || this.ownerDocument).querySelectorAll(s),
-            i,
-            el = this;
-        do {
-            i = matches.length;
-            while (--i >= 0 && matches.item(i) !== el) {};
-        } while ((i < 0) && (el = el.parentElement));
-        return el;
-    };
+  Element.prototype.closest = function (s) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+      i,
+      el = this;
+    do {
+      i = matches.length;
+      while (--i >= 0 && matches.item(i) !== el) {}
+    } while (i < 0 && (el = el.parentElement));
+    return el;
+  };
 }
 ```
 

diff --git a/files/zh-cn/web/api/element/compositionend_event/index.md b/files/zh-cn/web/api/element/compositionend_event/index.md
@@ -28,16 +28,16 @@ slug: Web/API/Element/compositionend_event
 
 ## Properties
 
-| Property                              | Type                                      | Description                                                                 |
-| ------------------------------------- | ----------------------------------------- | --------------------------------------------------------------------------- |
-| `target` {{ReadOnlyInline}}     | {{domxref("EventTarget")}}      | 聚焦元素处理成分                                                            |
-| `type` {{ReadOnlyInline}}       | {{domxref("DOMString")}}          | 事件类型                                                                    |
-| `bubbles` {{ReadOnlyInline}}    | `boolean`                                 | 事件是否冒泡                                                                |
-| `cancelable` {{ReadOnlyInline}} | `boolean`                                 | 是否可以取消该事件                                                          |
-| `view` {{ReadOnlyInline}}       | {{domxref("WindowProxy")}}      | {{domxref("Document.defaultView")}} (`window` of the document) |
-| `detail` {{ReadOnlyInline}}     | `long` (`float`)                          | 0.                                                                          |
-| `data` {{ReadOnlyInline}}       | {{domxref("DOMString")}} (string) | 正在编辑的原始字符串，否则为空字符串。只读。                                |
-| `locale`                              | {{domxref("DOMString")}} (string) | 组合事件的语言代码 (如果可用);否则，为空字符串。只读。                      |
+| Property                        | Type                              | Description                                                    |
+| ------------------------------- | --------------------------------- | -------------------------------------------------------------- |
+| `target` {{ReadOnlyInline}}     | {{domxref("EventTarget")}}        | 聚焦元素处理成分                                               |
+| `type` {{ReadOnlyInline}}       | {{domxref("DOMString")}}          | 事件类型                                                       |
+| `bubbles` {{ReadOnlyInline}}    | `boolean`                         | 事件是否冒泡                                                   |
+| `cancelable` {{ReadOnlyInline}} | `boolean`                         | 是否可以取消该事件                                             |
+| `view` {{ReadOnlyInline}}       | {{domxref("WindowProxy")}}        | {{domxref("Document.defaultView")}} (`window` of the document) |
+| `detail` {{ReadOnlyInline}}     | `long` (`float`)                  | 0.                                                             |
+| `data` {{ReadOnlyInline}}       | {{domxref("DOMString")}} (string) | 正在编辑的原始字符串，否则为空字符串。只读。                   |
+| `locale`                        | {{domxref("DOMString")}} (string) | 组合事件的语言代码 (如果可用);否则，为空字符串。只读。         |
 
 ## 规范
 

diff --git a/files/zh-cn/web/api/element/compositionstart_event/index.md b/files/zh-cn/web/api/element/compositionstart_event/index.md
@@ -43,7 +43,7 @@ slug: Web/API/Element/compositionstart_event
 ```js
 const inputElement = document.querySelector('input[type="text"]');
 
-inputElement.addEventListener('compositionstart', (event) => {
+inputElement.addEventListener("compositionstart", (event) => {
   console.log(`generated characters were: ${event.data}`);
 });
 ```
@@ -54,8 +54,11 @@ inputElement.addEventListener('compositionstart', (event) => {
 
 ```html
 <div class="control">
-  <label for="name">On macOS, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label>
-  <input type="text" id="example" name="example">
+  <label for="name"
+    >On macOS, click in the textbox below,<br />
+    then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label
+  >
+  <input type="text" id="example" name="example" />
 </div>
 
 <div class="event-log">
@@ -67,7 +70,7 @@ inputElement.addEventListener('compositionstart', (event) => {
 
 ```css hidden
 body {
-  padding: .2rem;
+  padding: 0.2rem;
   display: grid;
   grid-template-areas: "control  log";
 }
@@ -84,12 +87,13 @@ body {
   resize: none;
 }
 
-label, button {
+label,
+button {
   display: block;
 }
 
 input[type="text"] {
-  margin: .5rem 0;
+  margin: 0.5rem 0;
 }
 
 kbd {
@@ -103,20 +107,20 @@ kbd {
 
 ```js
 const inputElement = document.querySelector('input[type="text"]');
-const log = document.querySelector('.event-log-contents');
-const clearLog = document.querySelector('.clear-log');
+const log = document.querySelector(".event-log-contents");
+const clearLog = document.querySelector(".clear-log");
 
-clearLog.addEventListener('click', () => {
-    log.textContent = '';
+clearLog.addEventListener("click", () => {
+  log.textContent = "";
 });
 
 function handleEvent(event) {
-    log.textContent = log.textContent + `${event.type}: ${event.data}\n`;
+  log.textContent = log.textContent + `${event.type}: ${event.data}\n`;
 }
 
-inputElement.addEventListener('compositionstart', handleEvent);
-inputElement.addEventListener('compositionupdate', handleEvent);
-inputElement.addEventListener('compositionend', handleEvent);
+inputElement.addEventListener("compositionstart", handleEvent);
+inputElement.addEventListener("compositionupdate", handleEvent);
+inputElement.addEventListener("compositionend", handleEvent);
 ```
 
 #### 结果

diff --git a/files/zh-cn/web/api/element/compositionupdate_event/index.md b/files/zh-cn/web/api/element/compositionupdate_event/index.md
@@ -28,16 +28,16 @@ slug: Web/API/Element/compositionupdate_event
 
 ## 属性
 
-| Property                              | Type                                      | Description                                                                      |
-| ------------------------------------- | ----------------------------------------- | -------------------------------------------------------------------------------- |
-| `target` {{ReadOnlyInline}}     | {{domxref("EventTarget")}}      | 焦点所在的，处理文字输入的元素。                                                 |
-| `type` {{ReadOnlyInline}}       | {{domxref("DOMString")}}          | The type of event.                                                               |
-| `bubbles` {{ReadOnlyInline}}    | `boolean`                                 | Does the event normally bubble?                                                  |
-| `cancelable` {{ReadOnlyInline}} | `boolean`                                 | Is it possible to cancel the event?                                              |
-| `view` {{ReadOnlyInline}}       | {{domxref("WindowProxy")}}      | {{domxref("Document.defaultView")}} (the `window` of the document). |
-| `detail` {{ReadOnlyInline}}     | `long` (`float`)                          | 0.                                                                               |
-| `data` {{ReadOnlyInline}}       | {{domxref("DOMString")}} (string) | 要被替换掉的字符串，如果输入时没有字符串被选，则为空字符串。只读。               |
-| `locale` {{ReadOnlyInline}}     | {{domxref("DOMString")}} (string) | 输入事件的语言代号，或者空字符串。只读。                                         |
+| Property                        | Type                              | Description                                                         |
+| ------------------------------- | --------------------------------- | ------------------------------------------------------------------- |
+| `target` {{ReadOnlyInline}}     | {{domxref("EventTarget")}}        | 焦点所在的，处理文字输入的元素。                                    |
+| `type` {{ReadOnlyInline}}       | {{domxref("DOMString")}}          | The type of event.                                                  |
+| `bubbles` {{ReadOnlyInline}}    | `boolean`                         | Does the event normally bubble?                                     |
+| `cancelable` {{ReadOnlyInline}} | `boolean`                         | Is it possible to cancel the event?                                 |
+| `view` {{ReadOnlyInline}}       | {{domxref("WindowProxy")}}        | {{domxref("Document.defaultView")}} (the `window` of the document). |
+| `detail` {{ReadOnlyInline}}     | `long` (`float`)                  | 0.                                                                  |
+| `data` {{ReadOnlyInline}}       | {{domxref("DOMString")}} (string) | 要被替换掉的字符串，如果输入时没有字符串被选，则为空字符串。只读。  |
+| `locale` {{ReadOnlyInline}}     | {{domxref("DOMString")}} (string) | 输入事件的语言代号，或者空字符串。只读。                            |
 
 ## 规范
 

diff --git a/files/zh-cn/web/api/element/contentvisibilityautostatechange_event/index.md b/files/zh-cn/web/api/element/contentvisibilityautostatechange_event/index.md
@@ -26,9 +26,9 @@ oncontentvisibilityautostatechange = (event) => {};
 ## 示例
 
 ```js
-const canvasElem = document.querySelector('canvas');
+const canvasElem = document.querySelector("canvas");
 
-canvasElem.addEventListener('contentvisibilityautostatechange', stateChanged);
+canvasElem.addEventListener("contentvisibilityautostatechange", stateChanged);
 canvasElem.style.contentVisibility = "auto";
 
 function stateChanged(event) {
@@ -41,7 +41,7 @@ function stateChanged(event) {
 
 // 在画布需要开始更新时调用此方法。
 function startCanvasUpdates(canvas) {
-  // … 
+  // …
 }
 
 // 在画布需要停止更新时调用此方法。

diff --git a/files/zh-cn/web/api/element/contextmenu_event/index.md b/files/zh-cn/web/api/element/contextmenu_event/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Element: contextmenu event'
+title: "Element: contextmenu event"
 slug: Web/API/Element/contextmenu_event
 ---
 
@@ -46,9 +46,9 @@ slug: Web/API/Element/contextmenu_event
 ### JavaScript
 
 ```js
-noContext = document.getElementById('noContextMenu');
+noContext = document.getElementById("noContextMenu");
 
-noContext.addEventListener('contextmenu', e => {
+noContext.addEventListener("contextmenu", (e) => {
   e.preventDefault();
 });
 ```

diff --git a/files/zh-cn/web/api/element/dblclick_event/index.md b/files/zh-cn/web/api/element/dblclick_event/index.md
@@ -22,8 +22,8 @@ slug: Web/API/Element/dblclick_event
 
 ## 属性
 
-| 属性                                     | 类型                                             | 描述                                                                                                                                                                                                                                                                |
-| ---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 属性                               | 类型                                             | 描述                                                                                                                                                                                                                                                                |
+| ---------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `target` {{readonlyInline}}        | [`EventTarget`](/zh-CN/docs/Web/API/EventTarget) | 事件对象 (位于 DOM 树最上面的元素).                                                                                                                                                                                                                                 |
 | `type` {{readonlyInline}}          | [`DOMString`](/zh-CN/docs/Web/API/DOMString)     | 事件类型。                                                                                                                                                                                                                                                          |
 | `bubbles` {{readonlyInline}}       | [`Boolean`](/zh-CN/docs/Web/API/Boolean)         | 是否冒泡                                                                                                                                                                                                                                                            |

diff --git a/files/zh-cn/web/api/element/domactivate_event/index.md b/files/zh-cn/web/api/element/domactivate_event/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Element: DOMActivate event'
+title: "Element: DOMActivate event"
 slug: Web/API/Element/DOMActivate_event
 ---
 

diff --git a/files/zh-cn/web/api/element/firstelementchild/index.md b/files/zh-cn/web/api/element/firstelementchild/index.md
@@ -19,15 +19,15 @@ var element = node.firstElementChild;
 
 ```html
 <ul id="foo">
-  <li>First  (1)</li>
+  <li>First (1)</li>
   <li>Second (2)</li>
-  <li>Third  (3)</li>
+  <li>Third (3)</li>
 </ul>
 
 <script>
-var foo = document.getElementById('foo');
-// yields: First  (1)
-console.log(foo.firstElementChild.textContent);
+  var foo = document.getElementById("foo");
+  // yields: First  (1)
+  console.log(foo.firstElementChild.textContent);
 </script>
 ```