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
138
|
---
title: CSSStyleSheet.insertRule()
slug: Web/API/CSSStyleSheet/insertRule
translation_of: Web/API/CSSStyleSheet/insertRule
---
<div>{{APIRef("CSSOM")}} </div>
<p><strong>CSSStyleSheet.insertRule() </strong>方法新增一個新的 CSS 規則，到當前的樣式表，他伴隨著一些<a href="#Restrictions">限制</a>. </p>
<p>更明確的說，雖然 <strong>insertRule()</strong> 只是一個 {{domxref("CSSStyleSheet")}} 的方法， 他實際上插入這份規則到 {{domxref("CSSStyleSheet")}}.<em>cssRules</em>, 在 {{domxref("CSSRuleList")}} 之中。</p>
<p>這份規則，必須包含的內容，取決於它的類型： 對於規則集 (rule-sets)，規則同時指定了選擇器和样式聲明。 對於規則 (at-rules)，規則同時指定 at 標識符（ at-identifier ）和規則內容。</p>
<h2 id="Syntax"><em><em>Syntax</em></em></h2>
<pre class="syntaxbox"><em>
<em>
<var>stylesheet</var>.insertRule(<var>rule</var>[, <var>index</var>])</em></em></pre>
<h3 id="Parameters"><em><em>Parameters</em></em></h3>
<dl>
<dt><em><em>rule</em></em></dt>
<dd><em><em>一個 {{domxref("DOMString")}} 包含要被插入的規則，這份規則同時指定了選擇器（ <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selector</a> ）和样式聲明，或 at 標識符 (at-identifier ) 和規則內容。</em></em></dd>
<dt><em><em>index {{optional_inline}}</em></em></dt>
<dd>
<p><em><em>無符號整數，代表在 <em><em>{{domxref("CSSStyleSheet")}}<em>.</em>cssRules </em></em>中插入的位置，其中 index-0 是第一個規則，而 index-max 就是最後一個規則，並且與 CSSStyleSheet 的長度相同。cssRules 在舊的實現中是必需的。查詢「瀏覽器兼容」取得詳細信息。 默認值為 0。</em></em></p>
</dd>
</dl>
<h3 id="Return_value"><em><em><em><em>Return value</em></em></em></em></h3>
<p><em><em><em><em>The index within the style sheet's rule-list of the newly inserted rule.</em></em></em></em></p>
<h3 id="Restrictions_限制"><em><em><em><em>Restrictions 限制</em></em></em></em></h3>
<p><em><em>CSS 樣式表規則列表，有一些直覺的、和不是那麼直覺的<a href="https://drafts.csswg.org/cssom/#insert-a-css-rule">限制</a> ，影響著規則的插入方式和位置。<br>
違反這些可能會導致 DOM 異常 ({{domxref("DOMException")}}) 引發錯誤。</em></em></p>
<ul>
<li><em><em><em><em>如果 index > 樣式表中規則數量 (`CSSRuleList.length`)，他會中止，顯示 IndexSizeError (索引大小錯誤)。</em></em></em></em></li>
<li><em><em><em><em>如果 rule 無法在索引 0 插入，因為一些 CSS 因素的限制，他會中止，顯示 HierarchyRequestError (層次結構請求錯誤)。</em></em></em></em></li>
<li><em><em><em><em>如果規則參數中給出多個規則，他會中止，顯示 SyntaxError (語法錯誤)。</em></em></em></em></li>
<li><em><em><em><em>如果嘗試在樣式規則之後插入 `@import at-rule`，他會中止，顯示 HierarchyRequestError (層次結構請求錯誤)。</em></em></em></em></li>
<li><em><em><em><em>如果規則是 `@namespace at-rule`，且列表不只有 `@import at-rules` 和 / 或 `@namespace at-rules`他會中止，顯示 InvalidStateError (狀態錯誤無效)。</em></em></em></em></li>
</ul>
<h2 id="Examples">Examples</h2>
<h3 id="Example_1">Example 1</h3>
<pre class="brush: js">// push a new rule onto the top of my stylesheet
myStyle.insertRule("#blanc { color: white }", 0);
</pre>
<h3 id="Example_2">Example 2</h3>
<pre class="brush: js">/**
* Add a stylesheet rule to the document (may be better practice, however,
* to dynamically change classes, so style information can be kept in
* genuine stylesheets (and avoid adding extra elements to the DOM))
* Note that an array is needed for declarations and rules since ECMAScript does
* not afford a predictable object iteration order and since CSS is
* order-dependent (i.e., it is cascading); those without need of
* cascading rules could build a more accessor-friendly object-based API.
* @param {Array} rules Accepts an array of JSON-encoded declarations
* @example
addStylesheetRules([
['h2', // Also accepts a second argument as an array of arrays instead
['color', 'red'],
['background-color', 'green', true] // 'true' for !important rules
],
['.myClass',
['background-color', 'yellow']
]
]);
*/
function addStylesheetRules (rules) {
var styleEl = document.createElement('style'),
styleSheet;
// Append style element to head
document.head.appendChild(styleEl);
// Grab style sheet
styleSheet = styleEl.sheet;
for (var i = 0, rl = rules.length; i < rl; i++) {
var j = 1, rule = rules[i], selector = rules[i][0], propStr = '';
// If the second argument of a rule is an array of arrays, correct our variables.
if (Object.prototype.toString.call(rule[1][0]) === '[object Array]') {
rule = rule[1];
j = 0;
}
for (var pl = rule.length; j < pl; j++) {
var prop = rule[j];
propStr += prop[0] + ':' + prop[1] + (prop[2] ? ' !important' : '') + ';\n';
}
// Insert CSS Rule
styleSheet.insertRule(selector + '{' + propStr + '}', styleSheet.cssRules.length);
}
}</pre>
<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', '#dom-cssstylesheet-insertrule', 'CSSStyleSheet.insertRule')}}</td>
<td>{{Spec2('CSSOM')}}</td>
<td>No change from {{SpecName('DOM2 Style')}}.</td>
</tr>
<tr>
<td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleSheet-insertRule', 'CSSStyleSheet.insertRule')}}</td>
<td>{{Spec2('DOM2 Style')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
{{Compat("api.CSSStyleSheet.insertRule")}}
<h2 id="See_also">See also</h2>
<ul>
<li>{{domxref("CSSStyleSheet.deleteRule")}}</li>
<li><a class="external" href="http://www-archive.mozilla.org/docs/web-developer/css1technote/css1tojs.html#priority">Cross-Browser CSS-rules ordering (CSS1)</a></li>
<li><a class="external" href="http://www.quirksmode.org/dom/w3c_css.html">Quirksmode - CSS</a></li>
</ul>
|
