initial commit

3 files changed, 310 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/css_object_model/determining_the_dimensions_of_elements/index.html b/files/zh-cn/web/api/css_object_model/determining_the_dimensions_of_elements/index.html
new file mode 100644
index 0000000000..9a9d3557a5
--- /dev/null
+++ b/files/zh-cn/web/api/css_object_model/determining_the_dimensions_of_elements/index.html
@@ -0,0 +1,38 @@
+---
+title: Determining the dimensions of elements
+slug: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
+tags:
+  - clientHeight
+  - height
+  - offsetHeight
+translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
+---
+<p>{{APIRef("CSSOM View")}}</p>
+
+<p>当想要确认元素的宽高时有几种属性可以选择，但是我们很难确认使用哪个属性才是最适合的。本文将帮助你做出正确的选择。</p>
+
+<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><img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p>
+
+<h2 id="What.27s_the_size_of_the_displayed_content.3F" name="What.27s_the_size_of_the_displayed_content.3F">显示内容尺寸是多少？</h2>
+
+<p>如果你需要知道展示区域内容占用了多少空间，包括内边距但是不包括边框、外边距或者滚动条，你会使用<a href="https://developer.mozilla.org/en/DOM/element.clientWidth" style="font-family: Consolas, Monaco, 'Andale Mono', monospace;" title="en/DOM/element.clientWidth">clientWidth</a>和<a href="https://developer.mozilla.org/en/DOM/element.clientHeight" style="font-family: Consolas, Monaco, 'Andale Mono', monospace;" title="en/DOM/element.clientHeight">clientHeight</a>属性：</p>
+
+<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p>
+
+<h2 id="How_big_is_the_content.3F" name="How_big_is_the_content.3F">内容有多大？</h2>
+
+<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>
+
+<h2 id="References" name="References">规范</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/cssom-view/">http://www.w3.org/TR/cssom-view/</a></p>
+
+<h2 id="References" name="References">参考文献</h2>
+
+<p><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN Measuring Element Dimension and Location</a></p>
diff --git a/files/zh-cn/web/api/css_object_model/index.html b/files/zh-cn/web/api/css_object_model/index.html
new file mode 100644
index 0000000000..e33b7b07d8
--- /dev/null
+++ b/files/zh-cn/web/api/css_object_model/index.html
@@ -0,0 +1,131 @@
+---
+title: CSS Object Model
+slug: Web/API/CSS_Object_Model
+tags:
+  - API
+  - CSSOM
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/CSS_Object_Model
+---
+<p><strong>CSS Object Model</strong> 是一组允许用JavaScript操纵CSS的API。 它是继DOM和HTML API之后，又一个操纵CSS的接口，从而能够动态地读取和修改CSS样式。</p>
+
+<h2 id="API参考">API参考</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>{{domxref("CaretPosition")}}</li>
+ <li>{{domxref("CSS")}}</li>
+ <li>{{domxref("CSSCharsetRule")}}</li>
+ <li>{{domxref("CSSConditionRule")}}</li>
+ <li>{{domxref("CSSCounterStyleRule")}}</li>
+ <li>{{domxref("CSSFontFaceRule")}}</li>
+ <li>{{domxref("CSSFontFeatureValuesMap")}}</li>
+ <li>{{domxref("CSSFontFeatureValuesRule")}}</li>
+ <li>{{domxref("CSSGroupingRule")}}</li>
+ <li>{{domxref("CSSImportRule")}}</li>
+ <li>{{domxref("CSSKeyframeRule")}}</li>
+ <li>{{domxref("CSSKeyframesRule")}}</li>
+ <li>{{domxref("CSSMarginRule")}}</li>
+ <li>{{domxref("CSSMediaRule")}}</li>
+ <li>{{domxref("CSSNamespaceRule")}}</li>
+ <li>{{domxref("CSSPageRule")}}</li>
+ <li>{{domxref("CSSRule")}}</li>
+ <li>{{domxref("CSSRuleList")}}</li>
+ <li>{{domxref("CSSStylesheet")}}</li>
+ <li>{{domxref("CSSStyleDeclaration")}}</li>
+ <li>{{domxref("CSSSupportsRule")}}</li>
+ <li>{{domxref("CSSVariablesMap")}}</li>
+ <li>{{domxref("CSSViewportRule")}}</li>
+ <li>{{domxref("ElementCSSInlineStyle")}}</li>
+ <li>{{domxref("GeometryUtils")}}</li>
+ <li>{{domxref("GetStyleUtils")}}</li>
+ <li>{{domxref("LinkStyle")}}</li>
+ <li>{{domxref("MediaList")}}</li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("PseudoElement")}}</li>
+ <li>{{domxref("Screen")}}</li>
+ <li>{{domxref("Stylesheet")}}</li>
+ <li>{{domxref("StylesheetList")}}</li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
+</div>
+
+<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/WebAPI/Managing_screen_orientation">Managing screen orientation</a></li>
+</ul>
+
+<h2 id="规范">规范</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">进度</th>
+   <th scope="col">评价</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM")}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Screen Orientation")}}</td>
+   <td>{{Spec2("Screen Orientation")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Fonts")}}</td>
+   <td>{{Spec2("CSS3 Fonts")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Animations")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Transitions")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Variables")}}</td>
+   <td>{{Spec2("CSS3 Variables")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Conditional")}}</td>
+   <td>{{Spec2("CSS3 Conditional")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Device")}}</td>
+   <td>{{Spec2("CSS3 Device")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Counter Styles")}}</td>
+   <td>{{Spec2("CSS3 Counter Styles")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>近几年所有的这些新特性正在一点一点的向不同的浏览器内添加，不过这确实是一个很复杂无法用简单表格总结的过程。如果具体项目中需要用到，请详细的检查接口的可用性。</p>
diff --git a/files/zh-cn/web/api/css_object_model/using_dynamic_styling_information/index.html b/files/zh-cn/web/api/css_object_model/using_dynamic_styling_information/index.html
new file mode 100644
index 0000000000..7c2fffa8be
--- /dev/null
+++ b/files/zh-cn/web/api/css_object_model/using_dynamic_styling_information/index.html
@@ -0,0 +1,141 @@
+---
+title: 关于使用动态样式的信息
+slug: Web/API/CSS_Object_Model/Using_dynamic_styling_information
+tags:
+  - API
+  - CSSOM
+  - 初学者
+  - 指南
+translation_of: Web/API/CSS_Object_Model/Using_dynamic_styling_information
+---
+<div>{{DefaultAPISidebar("CSSOM")}}</div>
+
+<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>
+
+<p>基本样式对象公开了 {{domxref("Stylesheet")}} 和 {{domxref("CSSStylesheet")}} 接口。这些接口包括 <code>insertRule</code>、<code>selectorText</code> 以及 <code>parentStyleSheet</code> 等成员，用于获取和操作组成 CSS 样式表的各个规则。</p>
+
+<p>要从 <code>document</code> 中获取 <code>style</code> 对象，可以使用 {{domxref("document.styleSheets")}} 属性，并使用索引来获取某个对象（例如， <code>document.styleSheets[0]</code> 是该文档中的第一个样式表）。</p>
+
+<h2 id="Modify_a_stylesheet_rule" name="Modify_a_stylesheet_rule">通过 CSSOM 修改样式表</h2>
+
+<pre class="brush: html" style="font-size: 14px;">&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Modifying a stylesheet rule with CSSOM&lt;/title&gt;
+&lt;style type="text/css"&gt;
+body {
+ background-color: red;
+}
+&lt;/style&gt;
+&lt;script type="text/javascript"&gt;
+var stylesheet = document.styleSheets[1];
+stylesheet.cssRules[0].style.backgroundColor="blue";
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+The stylesheet declaration for the body's background color is modified via JavaScript.
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>{{ EmbedLiveSample('Modify_a_stylesheet_rule') }}</p>
+
+<p> <a href="https://developer.mozilla.org/en-US/docs/DOM/CSS" title="en/DOM/CSS">DOM CSS Properties List</a> 中给出了 DOM 中 style 属性的可用属性列表。</p>
+
+<p>若要使用 CSS 语法修改文档的样式，可以插入样式规则，或者插入{{HTMLElement("style")}} 标签，并将其 <code>innerHTML</code> 属性设置为期望的 CSS。</p>
+
+<h2 id="Modify_an_element_style" name="Modify_an_element_style">修改元素样式</h2>
+
+<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>要修改特定元素的样式，可以将以下示例修改为你想要的样式。</p>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;simple style example&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function alterStyle(elem) {
+  elem.style.background = 'green';
+}
+
+function resetStyle(elemId) {
+  elem = document.getElementById(elemId);
+  elem.style.background = 'white';
+}
+&lt;/script&gt;
+
+&lt;style type="text/css"&gt;
+#p1 {
+  border: solid blue 2px;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;!-- passes a reference to the element's object as parameter 'this'. --&gt;
+&lt;p id="p1" onclick="alterStyle(this);"&gt;
+ Click here to change background color.
+&lt;/p&gt;
+
+&lt;!-- passes the 'p1' id of another element's style to modify. --&gt;
+&lt;button onclick="resetStyle('p1');"&gt;Reset background color&lt;/button&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<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>
+
+<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> 对象来给某个元素设置单独的样式属性。</p>
+
+<div id="DOM_Style_Object_code_sample">
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+ &lt;head&gt;
+  &lt;title&gt;style Property Example&lt;/title&gt;
+  &lt;link rel="StyleSheet" href="example.css" type="text/css"&gt;
+  &lt;script type="text/javascript"&gt;
+    function stilo() {
+      document.getElementById('d').style.color = 'orange';
+    }
+    function resetStyle() {
+      document.getElementById('d').style.color = 'black';
+    }
+  &lt;/script&gt;
+ &lt;/head&gt;
+
+ &lt;body&gt;
+  &lt;div id="d" class="thunder"&gt;Thunder&lt;/div&gt;
+  &lt;button onclick="stilo()"&gt;Click here to change text color&lt;/button&gt;
+  &lt;button onclick="resetStyle()"&gt;Reset text color&lt;/button&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('DOM_Style_Object_code_sample') }}</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>
+
+<pre class="brush: js">var el = document.getElementById('some-element');
+el.setAttribute('style', 'background-color:darkblue;');
+</pre>
+
+
+
+<p>但请注意，<code>setAttribute</code> 会移除该元素样式对象中已经定义的其他样式属性。如果上面的 <code><var>some-element</var></code> 有一个行内样式属性：<code>style="font-size: 18px"</code>，其值将会因为使用了 <code>setAttribute</code> 方法而被移除。</p>