mdn · irvin · May 28, 2022 · May 28, 2022
@@ -10,7 +10,7 @@
 ---
 <p>{{APIRef("CSSOM")}}{{SeeCompatTable}}</p>
 
-<p> <code><strong>CSS.escape()</strong></code> 静态方法返回 {{domxref("DOMString")}} 包含作为参数传递的转义字符串，主要用作CSS选择器的一部分。</p>
+<p> <code><strong>CSS.escape()</strong></code> 静态方法返回 {{domxref("DOMString")}} 包含作为参数传递的转义字符串，主要用作 CSS 选择器的一部分。</p>
 
 <h2 id="语法">语法</h2>
 
@@ -31,12 +31,12 @@ <h3 id="基本结果">基本结果</h3>
 <pre class="brush: js">CSS.escape(".foo#bar")        // "\.foo\#bar"
 CSS.escape("()[]{}")          // "\(\)\[\]\\{\\}"
 CSS.escape('--a')             // "--a"
-CSS.escape(0)                 // "\30 ",  Unicode代码点“0”是30
-CSS.escape('\0')              // "\ufffd",  Unicode替换字符 </pre>
+CSS.escape(0)                 // "\30 ",  Unicode 代码点“0”是 30
+CSS.escape('\0')              // "\ufffd",  Unicode 替换字符 </pre>
 
 <h3 id="在上下文使用">在上下文使用</h3>
 
-<p>要转义一个字符串作为选择器使用， <code>escape()</code>方法可以用于:</p>
+<p>要转义一个字符串作为选择器使用， <code>escape()</code>方法可以用于：</p>
 
 <pre class="brush: js">var element = document.querySelector('#' + CSS.escape(id) + ' &gt; img');</pre>
 

@@ -1,5 +1,5 @@
 ---
-title: CSS数字工厂函数
+title: CSS 数字工厂函数
 slug: Web/API/CSS/factory_functions
 translation_of: Web/API/CSS/factory_functions
 ---
@@ -64,7 +64,7 @@ <h2 id="示例">示例</h2>
 console.log( height.value )  // 50
 console.log( height.unit )   // vmax</pre>
 
-<p>在这个例子中，我们给元素设定 margin 属性值，使用 <code>CSS.px()</code> 函数:</p>
+<p>在这个例子中，我们给元素设定 margin 属性值，使用 <code>CSS.px()</code> 函数：</p>
 
 <pre class="brush: js notranslate">myElement.attributeStyleMap.set('margin', CSS.px(40));
 let currentMargin = myElement.attributeStyleMap.get('margin');

@@ -5,11 +5,11 @@
 ---
 <p>{{APIRef("CSSOM")}}</p>
 
-<p><code>CSS</code> 接口涵盖CSS相关的实用方法。尚且不存在实现这个接口的对象：它仅仅包含静态的方法，因此也是一个实用性的接口。</p>
+<p><code>CSS</code> 接口涵盖 CSS 相关的实用方法。尚且不存在实现这个接口的对象：它仅仅包含静态的方法，因此也是一个实用性的接口。</p>
 
 <h2 id="属性">属性</h2>
 
-<p>CSS接口是一个工具接口，无法创建该类型的对象：其内部只定义了静态属性。</p>
+<p>CSS 接口是一个工具接口，无法创建该类型的对象：其内部只定义了静态属性。</p>
 
 <h3 id="静态属性">静态属性</h3>
 
@@ -20,7 +20,7 @@ <h3 id="静态属性">静态属性</h3>
 
 <h2 id="方法">方法</h2>
 
-<p>CSS接口是一个工具接口，无法创建该类型的对象：其内部只定义了静态方法。</p>
+<p>CSS 接口是一个工具接口，无法创建该类型的对象：其内部只定义了静态方法。</p>
 
 <h3 id="静态方法">静态方法</h3>
 
@@ -32,9 +32,9 @@ <h3 id="静态方法">静态方法</h3>
  <dt>{{DOMxRef("CSS.supports()")}}</dt>
  <dd>返回一个 {{JSxRef("Boolean")}} 来表明键值对、条件，或者传入参数是否受支持。</dd>
  <dt>{{DOMxRef("CSS.escape()")}}</dt>
- <dd>可以用来转义一个大多用来当作CSS选择器一部分的字符串。</dd>
+ <dd>可以用来转义一个大多用来当作 CSS 选择器一部分的字符串。</dd>
  <dt>{{DOMxRef("CSS.factory_functions", 'CSS factory functions')}}</dt>
- <dd>可以用来返回一个 <code><a href="/zh-CN/docs/Web/API/CSSUnitValue">CSSUnitValue</a></code>。它的值由传入的数值以及调用的factory方法名称组成。</dd>
+ <dd>可以用来返回一个 <code><a href="/zh-CN/docs/Web/API/CSSUnitValue">CSSUnitValue</a></code>。它的值由传入的数值以及调用的 factory 方法名称组成。</dd>
  <dd>
  <pre class="notranslate">CSS.em(3) // CSSUnitValue {value: 3, unit: "em"}</pre>
  </dd>

@@ -9,7 +9,7 @@
 ---
 <p>{{APIRef("CSSOM")}}</p>
 
-<p><code><strong>CSS.supports()</strong></code> 静态方法返回一个{{domxref("Boolean")}}值，用来校验浏览器是否支持一个给定的CSS特性。</p>
+<p><code><strong>CSS.supports()</strong></code> 静态方法返回一个{{domxref("Boolean")}}值，用来校验浏览器是否支持一个给定的 CSS 特性。</p>
 
 <h2 id="语法">语法</h2>
 
@@ -19,13 +19,13 @@ <h2 id="语法">语法</h2>
 
 <h3 id="参数">参数</h3>
 
-<p>有两种不同的传值形式。第一种用来检验浏览器对于一对“属性-属性值”的支持：</p>
+<p>有两种不同的传值形式。第一种用来检验浏览器对于一对“属性 - 属性值”的支持：</p>
 
 <dl>
  <dt><em>propertyName</em></dt>
- <dd>一个包含要检查的CSS属性名称的{{domxref("DOMString")}}。</dd>
+ <dd>一个包含要检查的 CSS 属性名称的{{domxref("DOMString")}}。</dd>
  <dt><em>value</em></dt>
- <dd>一个包含要检查的CSS属性值的{{domxref("DOMString")}}。</dd>
+ <dd>一个包含要检查的 CSS 属性值的{{domxref("DOMString")}}。</dd>
 </dl>
 
 <p>第二种语法需要一个匹配{{cssxref("@supports")}}条件的参数：</p>

@@ -10,15 +10,15 @@
 ---
 <div>{{APIRef("CSS Font Loading API")}}{{SeeCompatTable}}</div>
 
-<p class="summary">CSS 字体加载 API 为您提供了动态加载字体资源时的events和interfaces。</p>
+<p class="summary">CSS 字体加载 API 为您提供了动态加载字体资源时的 events 和 interfaces。</p>
 
 <h2 id="Interfaces">Interfaces</h2>
 
 <dl>
  <dt>{{domxref('FontFace')}}</dt>
  <dd>表示单个可用的字体。</dd>
  <dt>{{domxref('FontFaceSet')}}</dt>
- <dd>字体API的一个接口，支持检测它们（字体文件）的下载状态。</dd>
+ <dd>字体 API 的一个接口，支持检测它们（字体文件）的下载状态。</dd>
  <dt>{{domxref('FontFaceSource')}}</dt>
  <dd>提供混合了所有的字体相关操作，除非你别有深意。它定义了 {{domxref("Document")}} 和 {{domxref("WorkerGlobalScope")}} 中的可用属性 {{domxref("FontFaceSources.fonts")}} 。</dd>
  <dt>{{event('FontFaceSetLoadEvent')}}</dt>

@@ -13,7 +13,7 @@
 
 <h2 id="How_much_room_does_it_use_up.3F" name="How_much_room_does_it_use_up.3F">元素占用了多少空间？</h2>
 
-<p>如果你需要知道元素总共占用了多少空间，包括可视内容、滚动条（如果有的话）、内边距和边框的宽度，你会使用  <code style="font-style: normal;"><a href="https://developer.mozilla.org/en/DOM/element.offsetWidth" title="en/DOM/element.offsetWidth">offsetWidth</a></code> 和 <a href="https://developer.mozilla.org/en/DOM/element.offsetHeight" style="font-family: Consolas, Monaco, 'Andale Mono', monospace;" title="en/DOM/element.offsetHeight">offsetHeight</a> 属性， 大多数情况下，当元素没有什么形状上的变化时，他们与 <a href="https://developer.mozilla.org/en/DOM/element.getBoundingClientRect" style="font-family: Consolas, Monaco, 'Andale Mono', monospace;" title="en/DOM/element.getBoundingClientRect">getBoundingClientRect()</a>的宽高一致。但是如果发生变化，offsetWidth和offsetHeight将返回元素的布局宽高，而getBoundingClientRect()将返回实际渲染的宽高。例如：如果元素的宽width:100px,变化transform:scale(0.5)，此时getBoundingClientRect()将返回宽50，而offsetWidth将返回宽100.</p>
+<p>如果你需要知道元素总共占用了多少空间，包括可视内容、滚动条（如果有的话）、内边距和边框的宽度，你会使用  <code style="font-style: normal;"><a href="https://developer.mozilla.org/en/DOM/element.offsetWidth" title="en/DOM/element.offsetWidth">offsetWidth</a></code> 和 <a href="https://developer.mozilla.org/en/DOM/element.offsetHeight" style="font-family: Consolas, Monaco, 'Andale Mono', monospace;" title="en/DOM/element.offsetHeight">offsetHeight</a> 属性， 大多数情况下，当元素没有什么形状上的变化时，他们与 <a href="https://developer.mozilla.org/en/DOM/element.getBoundingClientRect" style="font-family: Consolas, Monaco, 'Andale Mono', monospace;" title="en/DOM/element.getBoundingClientRect">getBoundingClientRect()</a>的宽高一致。但是如果发生变化，offsetWidth 和 offsetHeight 将返回元素的布局宽高，而 getBoundingClientRect() 将返回实际渲染的宽高。例如：如果元素的宽 width:100px，变化 transform:scale(0.5)，此时 getBoundingClientRect() 将返回宽 50，而 offsetWidth 将返回宽 100.</p>
 
 <p><img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p>
 
@@ -27,7 +27,7 @@ <h2 id="How_big_is_the_content.3F" name="How_big_is_the_content.3F">内容有多
 
 <p>如果你想要知道内容区域的实际大小，而不局限于可见区域的话，你会使用 <code style="font-style: normal;"><a href="/en/DOM/element.scrollWidth" title="en/DOM/element.scrollWidth">scrollWidth</a></code>和<a href="/en-US/docs/Web/API/Element.scrollHeight" style="font-family: Consolas, Monaco, 'Andale Mono', monospace;" title="en/DOM/element.scrollHeight">scrollHeight</a>属性。即使使用了滚动条仅有部分内容可见，这两个属性仍会返回元素的完整内容宽高</p>
 
-<p>例如，一个300x300像素 的滚动盒子里放置了一个600x400像素的元素，scrollWidth将会返回600，scrooHeight返回400.</p>
+<p>例如，一个 300x300 像素 的滚动盒子里放置了一个 600x400 像素的元素，scrollWidth 将会返回 600，scrooHeight 返回 400.</p>
 
 <h2 id="References" name="References">规范</h2>
 

@@ -9,9 +9,9 @@
   - TopicStub
 translation_of: Web/API/CSS_Object_Model
 ---
-<p><strong>CSS Object Model</strong> 是一组允许用JavaScript操纵CSS的API。 它是继DOM和HTML API之后，又一个操纵CSS的接口，从而能够动态地读取和修改CSS样式。</p>
+<p><strong>CSS Object Model</strong> 是一组允许用 JavaScript 操纵 CSS 的 API。 它是继 DOM 和 HTML API 之后，又一个操纵 CSS 的接口，从而能够动态地读取和修改 CSS 样式。</p>
 
-<h2 id="API参考">API参考</h2>
+<h2 id="API参考">API 参考</h2>
 
 <div class="index">
 <ul>
@@ -53,14 +53,14 @@ <h2 id="API参考">API参考</h2>
 </ul>
 </div>
 
-<p>CSSOM相关规范也扩展了其他几个接口：</p>
+<p>CSSOM 相关规范也扩展了其他几个接口：</p>
 
 <p>{{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, and {{domxref("SVGElement")}}.</p>
 
 <h2 id="教程">教程</h2>
 
 <ul>
- <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a> (这篇文档可能有点过时，因为它是在的DHTML/Ajax时代写的).</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a> (这篇文档可能有点过时，因为它是在的 DHTML/Ajax 时代写的).</li>
  <li><a href="/en-US/docs/WebAPI/Managing_screen_orientation">Managing screen orientation</a></li>
 </ul>
 

@@ -10,7 +10,7 @@
 ---
 <div>{{DefaultAPISidebar("CSSOM")}}</div>
 
-<p class="summary">CSS 对象模型（CSSOM），是 DOM 的一部分，通过暴露一些接口，允许操作很多与 CSS 相关的信息。最初定义在 <em>DOM Level 2 Style</em> 提议中，现在，这些接口形成了一个规范，<em>CSS对象模型（CSSOM）</em>，旨在取代它。</p>
+<p class="summary">CSS 对象模型（CSSOM），是 DOM 的一部分，通过暴露一些接口，允许操作很多与 CSS 相关的信息。最初定义在 <em>DOM Level 2 Style</em> 提议中，现在，这些接口形成了一个规范，<em>CSS 对象模型（CSSOM）</em>，旨在取代它。</p>
 
 <p>在很多情况下，如果可能的话，通过 {{ domxref("element.className", "className") }} 属性来动态操作元素类名确实是最好的方式，因为所有的样式钩子的最终外观都可以在一个样式表中控制。这样写出的 JavaScript 代码也会变得更清晰，因为它不专注与样式相关的细节，而是专注于所创作或者操作的每一部分的整体语义，将精细的样式细节留给样式表。然而实际上也有以一些获取或者操作样式规则有用的情况（无论是对于正样式包还是的那个元素），将在下面进一步详细描述。同样应该注意，同操作单独元素的样式一样，当说到操作样式表的时候，并不是真的操作实际的物理文档，而仅仅是文档的内部表示。</p>
 
@@ -48,7 +48,7 @@ <h2 id="Modify_an_element_style" name="Modify_an_element_style">修改元素样
 
 <p> 元素的 {{domxref("HTMLElement.style", "style")}} 属性（见下面的 DOM 样式对象部分）也可以用于获取和设置元素的样式。然而，该属性只能返回通过内敛方式设置的样式属性（例如 <code>&lt;td style="background-color: lightblue"&gt;</code> 返回 "<code>background-color:lightblue</code>"，或者直接针对哪个元素使用  <code>element.style.propertyName</code>, 即使样式表中还有该元素上的其他样式）。</p>
 
-<p>此外，当你在元素上设置某个属性的时候，你会覆盖并擦除掉别处为该元素的这个属性设置的值。以设置 border 属性为例，将覆盖掉在 &lt;head&gt; 部分或者外部样式表设置的该元素的 border 属性。然而这并不会影响元素的其他属性，例如 padding、margin 或 font等。</p>
+<p>此外，当你在元素上设置某个属性的时候，你会覆盖并擦除掉别处为该元素的这个属性设置的值。以设置 border 属性为例，将覆盖掉在 &lt;head&gt; 部分或者外部样式表设置的该元素的 border 属性。然而这并不会影响元素的其他属性，例如 padding、margin 或 font 等。</p>
 
 <p>要修改特定元素的样式，可以将以下示例修改为你想要的样式。</p>
 
@@ -91,11 +91,11 @@ <h2 id="Modify_an_element_style" name="Modify_an_element_style">修改元素样
 
 <p>{{ EmbedLiveSample('Modify_an_element_style') }}</p>
 
-<p><code>document.defaultView</code> 对象的 {{domxref("window.getComputedStyle", "getComputedStyle()")}} 返回某个元素的所有经过计算的样式. 查看<a href="/en/Gecko_DOM_Reference/Examples#Example_6:_getComputedStyle" title="en/Gecko_DOM_Reference/Examples#Example_6:_getComputedStyle">Example 6: getComputedStyle</a> 示例章节了解更多使用该方法的信息。.</p>
+<p><code>document.defaultView</code> 对象的 {{domxref("window.getComputedStyle", "getComputedStyle()")}} 返回某个元素的所有经过计算的样式。查看<a href="/en/Gecko_DOM_Reference/Examples#Example_6:_getComputedStyle" title="en/Gecko_DOM_Reference/Examples#Example_6:_getComputedStyle">Example 6: getComputedStyle</a> 示例章节了解更多使用该方法的信息。.</p>
 
-<h2 id="DOM_Style_Object" name="DOM_Style_Object">DOM样式对象</h2>
+<h2 id="DOM_Style_Object" name="DOM_Style_Object">DOM 样式对象</h2>
 
-<p><code>style</code> 对象表示了一个单独的样式声明。不像<code><a href="/en/DOM/document.styleSheets" title="en/DOM/document.styleSheets">document.styleSheets</a></code> 集合中每个单独的样式规则，样式规则是通过 <code>document</code> 对象或者应用改样式的元素来访问的. 它表示特定元素的内联样式。</p>
+<p><code>style</code> 对象表示了一个单独的样式声明。不像<code><a href="/en/DOM/document.styleSheets" title="en/DOM/document.styleSheets">document.styleSheets</a></code> 集合中每个单独的样式规则，样式规则是通过 <code>document</code> 对象或者应用改样式的元素来访问的。它表示特定元素的内联样式。</p>
 
 <p>比这两个属性更重要的是使用 <code>style</code> 对象来给某个元素设置单独的样式属性。</p>
 
@@ -126,11 +126,11 @@ <h2 id="DOM_Style_Object" name="DOM_Style_Object">DOM样式对象</h2>
 
 <p>{{ EmbedLiveSample('DOM_Style_Object_code_sample') }}</p>
 
-<p>style的 media 和type 给不给出都可以。</p>
+<p>style 的 media 和 type 给不给出都可以。</p>
 
 <h3 id="DOM_Style_Object_SetAttribue" name="DOM_Style_Object_SetAttribue">使用 <code>setAttribute</code> 方法</h3>
 
-<p>注意，你也可以通过获得元素的引用，然后使用它的 <code><a href="/en/DOM/element.setAttribute" title="en/DOM/element.setAttribute">setAttribute</a></code> 方法，指定CSS属性和值，来改变该元素的样式。</p>
+<p>注意，你也可以通过获得元素的引用，然后使用它的 <code><a href="/en/DOM/element.setAttribute" title="en/DOM/element.setAttribute">setAttribute</a></code> 方法，指定 CSS 属性和值，来改变该元素的样式。</p>
 
 <pre class="brush: js">var el = document.getElementById('some-element');
 el.setAttribute('style', 'background-color:darkblue;');

@@ -9,7 +9,7 @@
 
 <p> </p>
 
-<p><strong>CSSConditionRule</strong> 对象表示单个条件 CSS 规则, 由条件和语句块组成。继承至 {{domxref("CSSGroupingRule")}}.</p>
+<p><strong>CSSConditionRule</strong> 对象表示单个条件 CSS 规则，由条件和语句块组成。继承至 {{domxref("CSSGroupingRule")}}.</p>
 
 <p>从它派生的两个对象 : {{domxref("CSSMediaRule")}} and {{domxref("CSSSupportsRule")}}.</p>
 

@@ -21,14 +21,14 @@ <h2 id="创建">创建</h2>
 
 <dl>
  <dt>{{domxref("CSSMathSum.CSSMathSum()")}}</dt>
- <dd>创建一个新的 <code>CSSMathSum</code> 对象.</dd>
+ <dd>创建一个新的 <code>CSSMathSum</code> 对象。</dd>
 </dl>
 
 <h2 id="属性">属性</h2>
 
 <dl>
  <dt>{{domxref('CSSMathSum.values')}}</dt>
- <dd>返回一个包含一个或多个 {{domxref('CSSNumericValue')}} 对象的 {{domxref('CSSNumericArray')}} 对象.</dd>
+ <dd>返回一个包含一个或多个 {{domxref('CSSNumericValue')}} 对象的 {{domxref('CSSNumericArray')}} 对象。</dd>
 </dl>
 
 <h3 id="事件处理">事件处理</h3>
@@ -51,7 +51,7 @@ <h2 id="说明">说明</h2>
   <tr>
    <td>{{SpecName('CSS Typed OM','#cssmathsum','CSSMathSum')}}</td>
    <td>{{Spec2('CSS Typed OM')}}</td>
-   <td>初稿.</td>
+   <td>初稿。</td>
   </tr>
  </tbody>
 </table>

@@ -10,7 +10,7 @@
 ---
 <div>{{ APIRef("CSSOM") }}</div>
 
-<p><strong><code>CSSMediaRule</code></strong> 是一个表示单个CSS {{cssxref("@media")}} 规则的接口。它实现了 {{domxref("CSSConditionRule")}} 接口，因此也是 {{domxref("CSSGroupingRule")}}，也相当于{{domxref("CSSRule")}}中类型值为 <code>4</code> 的规则类型（即<code>CSSRule.MEDIA_RULE</code>）。</p>
+<p><strong><code>CSSMediaRule</code></strong> 是一个表示单个 CSS {{cssxref("@media")}} 规则的接口。它实现了 {{domxref("CSSConditionRule")}} 接口，因此也是 {{domxref("CSSGroupingRule")}}，也相当于{{domxref("CSSRule")}}中类型值为 <code>4</code> 的规则类型（即<code>CSSRule.MEDIA_RULE</code>）。</p>
 
 <h2 id="语法">语法</h2>