blob: e33b7b07d89bd091ca7b74c57f94017221ce14c0 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
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>
|
