blob: df8709c400abddae170465f5fa43098a86779695 (
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
132
133
|
---
title: CSS Object Model
slug: Web/API/CSS_Object_Model
tags:
- API
- CSSOM
- Referencia
translation_of: Web/API/CSS_Object_Model
---
<p>{{DefaultAPISidebar('CSSOM')}}</p>
<p>O CSS Object Model é um conjunto de APIs que permite manipular o CSS através do JavaScript. Isto depende do DOM e da HTML APIs. Com isto é permitido a leitura e a modificação dos estilos CSS dinamicamente.</p>
<h2 id="Referências">Referências</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>Outras interfaces podem ser usadas com CSSOM:</p>
<p>{{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, and {{domxref("SVGElement")}}.</p>
<h2 id="Tutoriais">Tutoriais</h2>
<ul>
<li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determinando dimensões de elementos</a> (É necessário algumas atualizações, já que foi feito com DHTML/Ajax).</li>
<li><a href="/en-US/docs/WebAPI/Managing_screen_orientation">Gerenciando as orientações da tela</a></li>
</ul>
<h2 id="Especificações">Especificações</h2>
<p> </p>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</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="Notas_de_compatibilidade_do_navegador">Notas de compatibilidade do navegador</h2>
<p>Todos esses recursos foram adicionados pouco a pouco ao logo dos anos para os diferentes navegadores: Foi um processo bastante complexo que não podem ser sintetizados em uma simples tabela. Por favor, pesquise por uma interface específica e sua disponibilidade.</p>
|
