blob: 269faaad2617bf647e9ad9e1e21ca3c2010fc241 (
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
134
135
136
137
|
---
title: CSSStyleDeclaration.setProperty()
slug: Web/API/CSSStyleDeclaration/setProperty
translation_of: Web/API/CSSStyleDeclaration/setProperty
---
<p>{{ APIRef("CSSOM") }}</p>
<p><span class="seoSummary"><strong><code>CSSStyleDeclaration.setProperty()</code></strong> 方法接口为一个声明了CSS样式的对象设置一个新的值 。</span></p>
<h2 id="语法">语法</h2>
<pre><em>style</em>.setProperty(<em>propertyName</em>, <em>value, priority</em>);</pre>
<h3 id="参数">参数</h3>
<ul>
<li><em><code>propertyName</code></em> 是一个 {{domxref('DOMString')}} ，代表被更改的CSS属性。</li>
<li><em><code>value</code></em>{{optional_inline}} 是一个 {{domxref('DOMString')}} ，含有新的属性值。如果没有指定, 则当作空字符串。
<ul>
<li>注意: <em><code>value</code></em> 不能包含 <code>"!important"</code> --那个应该使用 <em><code>priority</code></em> 参数.</li>
</ul>
</li>
<li><em><code>priority</code></em>{{optional_inline}} 是一个 {{domxref('DOMString')}} 允许设置 "important" CSS 优先级。如果没有指定, 则当作空字符串。</li>
</ul>
<h3 id="返回值">返回值</h3>
<ul>
<li>{{jsxref('undefined')}}</li>
</ul>
<h3 id="异常">异常</h3>
<ul>
<li>{{domxref('DOMException')}} (NoModificationAllowedError)： 如果属性或装饰块为只读的，抛出此异常。</li>
</ul>
<p>JavaScript 有一个特别的，更简单的在 CSSStyleDeclaration 对象上设置CSS属性值的语法：</p>
<pre class="syntaxbox"><em>style</em>.cssPropertyName = 'value';</pre>
<h2 id="示例">示例</h2>
<p>下面的Javascript代码为一个选中元素样式的 <code>margin</code> 属性设置一个新的值:</p>
<pre class="brush: js">var declaration = document.styleSheets[0].rules[0].style;
declaration.setProperty('margin', '1px 2px');
// Equivalent to:
// declaration.margin = '1px 2px';
</pre>
<h2 id="说明"> 说明</h2>
<table>
<thead>
<tr>
<th scope="col">描述</th>
<th scope="col">状态</th>
<th scope="col">注释</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSSOM', '#dom-cssstyledeclaration-setproperty', 'CSSStyleDeclaration.setProperty()')}}</td>
<td>工作草案</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSStyleDeclaration')}}</td>
<td>被废弃</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容">浏览器兼容</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<thead>
<tr>
<th scope="col">特性</th>
<th scope="col">Chrome</th>
<th scope="col">Edge</th>
<th scope="col">Firefox (Gecko)</th>
<th scope="col">Internet Explorer</th>
<th scope="col">Opera</th>
<th scope="col">Safari (WebKit)</th>
</tr>
</thead>
<tbody>
<tr>
<td>基础支持</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>特性</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>基础支持</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
<div>
<h3 id="want_learn_more">want learn more</h3>
<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle">getComputedStyle</a><br>
<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleDeclaration/getPropertyValue">getPropertyValue</a></div>
</div>
|
