blob: e924a96301cc5ead59ef2d7198130c58f2418a49 (
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>{{DefaultAPISidebar('CSSOM')}}</p>
<p>The <strong>CSS Object Model</strong> is a set of APIs allowing to manipulate CSS from JavaScript. It is the pendant of DOM and HTML APIs, but for CSS. It allows to read and modify CSS style dynamically.</p>
<h2 id="Reference">Reference</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>Several other interfaces are also extended by the CSSOM-related specifications: {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, and {{domxref("SVGElement")}}.</p>
<h2 id="Tutorials">Tutorials</h2>
<ul>
<li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a> (it needs some updating as it was made in the DHTML/Ajax era).</li>
<li><a href="/en-US/docs/WebAPI/Managing_screen_orientation">Managing screen orientation</a></li>
</ul>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</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="Browser_compatibility_notes">Browser compatibility notes</h2>
<p>All these features have been added little by little over the years to the different browsers: it was a quite complex process that can't be summarized in a simple table. Please refer to the specific interfaces for its availability.</p>
|
