blob: 0a8fd0ae45df431090bc9efd736a4f7973bde7ee (
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
|
---
title: CSSStyleDeclaration
slug: Web/API/CSSStyleDeclaration
tags:
- API
- CSSOM
- 参考
- 接口
translation_of: Web/API/CSSStyleDeclaration
---
<p>{{ APIRef("CSSOM") }}</p>
<p><strong><code>CSSStyleDeclaration</code></strong> 接口表示一个对象，它是一个 CSS 声明块，CSS 属性键值对的集合。它暴露了样式信息和各种与样式相关的方法和属性。</p>
<p><code>CSSStyleDeclaration</code> 对象可被暴露于三种不同的 API 下：</p>
<ul>
<li>{{domxref("HTMLElement.style")}}，用于操作单个元素的样式（<code><elem style="..."></code>）。</li>
<li>{{domxref("CSSStyleSheet")}} API，举个例子，<code>document.styleSheets[0].cssRules[0].style</code> 会返回文档中第一个样式表中的第一条 CSS 规则。</li>
<li>{{domxref("Window.getComputedStyle()")}}，将 <code>CSSStyleDeclaration</code> 对象作为一个<strong>只读</strong>的接口。</li>
</ul>
<h2 id="属性">属性</h2>
<dl>
<dt>{{domxref("CSSStyleDeclaration.cssText")}}</dt>
<dd>当前声明块的文本内容。设置此属性会改变样式。</dd>
<dt>{{domxref("CSSStyleDeclaration.length")}}</dt>
<dd>属性的数量。参照下面的 {{domxref("CSSStyleDeclaration.item()", 'item()')}} 方法。</dd>
<dt>{{domxref("CSSStyleDeclaration.parentRule")}}</dt>
<dd>包含当前声明块的 {{domxref("CssRule")}}。</dd>
</dl>
<h2 id="方法">方法</h2>
<dl>
<dt>{{domxref("CSSStyleDeclaration.getPropertyPriority()")}}</dt>
<dd>返回可选的优先级，"important"。</dd>
<dt>{{domxref("CSSStyleDeclaration.getPropertyValue()")}}</dt>
<dd>返回给定属性的值。</dd>
<dt>{{domxref("CSSStyleDeclaration.item()")}}</dt>
<dd>返回用index标记的属性名，当index越界时返回空字符串。</dd>
<dd>另一个可选方案：使用nodeList[<var>i</var>]（在i越界时返回 undefined）获取。通常在非JavaScript Dom 实现方案是很有用。</dd>
<dt>{{domxref("CSSStyleDeclaration.removeProperty()")}}</dt>
<dd>从 CSS 声明块中删除属性。</dd>
<dt>{{domxref("CSSStyleDeclaration.setProperty()")}}</dt>
<dd>在CSS声明块中修改现有属性或设置新属性。</dd>
<dt>{{domxref("CSSStyleDeclaration.getPropertyCSSValue()")}} {{obsolete_inline}}</dt>
<dd><strong>仅在火狐浏览器中支持 getComputedStyle.</strong> 返回 {{ domxref("CSSPrimitiveValue") }} or <code>null</code> for <a href="/en-US/docs/Web/CSS/Shorthand_properties" title="en/Guide to Shorthand CSS">shorthand properties</a>.</dd>
</dl>
<h2 id="范例">范例</h2>
<pre class="brush: js notranslate">var styleObj = document.styleSheets[0].cssRules[0].style;
console.log(styleObj.cssText);
for (var i = styleObj.length; i--;) {
var nameString = styleObj[i];
styleObj.removeProperty(nameString);
}
console.log(styleObj.cssText);</pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSSOM', '#the-cssstyledeclaration-interface', 'CSSStyleDeclaration')}}</td>
<td>{{Spec2('CSSOM')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSStyleDeclaration')}}</td>
<td>{{Spec2('DOM2 Style')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.CSSStyleDeclaration")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li><a href="/zh-CN/docs/Web/CSS/CSS_Properties_Reference">DOM CSS Properties</a></li>
</ul>
|
