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
|
---
title: CSSStyleSheet.insertRule()
slug: Web/API/CSSStyleSheet/insertRule
tags:
- CSSStyleSheet
translation_of: Web/API/CSSStyleSheet/insertRule
---
<div>
{{APIRef}}</div>
<p><span style="color: rgb(77, 78, 83);">El método </span><code style="font-size: 14px; color: rgb(77, 78, 83);"><strong>CSSStyleSheet.insertRule()</strong></code><span style="color: rgb(77, 78, 83);"> inserta una nueva regla de estilo en la actual hoja de estilos.</span></p>
<p><span style="color: rgb(77, 78, 83);">Para conjuntos de reglas ésta contiene tanto al selector como la declaración de estilo. Para reglas-arroba, ésta especifica tanto al identificador-arroba como como al contenido de la regla. Si se asignan varias reglas en el </span>{{domxref("DOMString")}}<span style="color: rgb(77, 78, 83);"> como parámetro se dispara una </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;"> </span><span style="line-height: 1.5;">{{domxref("DOMException")}}</span><span style="line-height: 1.5;"> con el código </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">SYNTAX_ERR</span><span style="line-height: 1.5;">.</span></p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox"><var>stylesheet</var>.insertRule(<var>regla</var>, índice)</pre>
<h3 id="Parameters" name="Parameters">Parameters</h3>
<ul>
<li><code>regla</code> es un {{domxref("DOMString")}} que contiene la regla que se va a insertar (selector y declaración).</li>
<li><font face="Courier New, Andale Mono, monospace"><span style="line-height: normal;">índice</span></font> es un <code>unsigned int</code> que representa la posicion en la que se va a insertar.</li>
</ul>
<h2 id="Examples" name="Examples">Ejemplos</h2>
<h3 id="Example_1" name="Example_1">Ejemplo 1</h3>
<pre class="brush: js">// Insertar una nueva regla al principio de mi hoja de estilos
myStyle.insertRule("#blanc { color: white }", 0);
</pre>
<h3 id="Example_2" name="Example_2">Example 2</h3>
<pre class="brush: js">/**
* Agregar una regla de hoja de estilos al documento(sin embargo, una mejor práctica puede ser
* cambiar las clases dinamicamente, así se mantiene la información de estilo en
* hojas de estilo genuinas (evitando agregar elementos extras al DOM))
* Note que se necesita una matriz para las declaraciones y reglas ya que ECMAScript
* no proporciona un orden de iteración predecible y como CSS
* depende del <span style="line-height: normal;">orden</span><span style="line-height: normal;">(i.e., es cascada); aquellos sin necesidad de</span>
* reglas en cascada podrían construir una API basada en objetos de acceso más amigable.
* @param {Matriz} reglas. Acepta una matriz de declaraciones JSON-encoded
* @example
addStylesheetRules([
['h2', // Acepta un segundo argumento como una matriz de matrices
['color', 'red'],
['background-color', 'green', true] // 'true' para reglas !important
],
['.myClass', ['background-color', 'yellow']
]
]);
*/
function addStylesheetRules (decls) {
var styleEl = document.createElement('style');
document.head.appendChild(styleEl);
// Aparentemente ¿alguna versión de Safari necesita la siguiente linea? No lo sé.
styleEl.appendChild(document.createTextNode(''));
var s = styleEl.sheet;
for (var i=0, rl = rules.length; i < rl; i++) {
var j = 1, rule = rules[i], selector = decl[0], propStr = '';
// Si el segundo argumento de una regla es una matriz de matrices, corrijamos nuestras 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';
}
s.insertRule(selector + '{' + propStr + '}', s.cssRules.length);
}
}</pre>
<h2 id="Specification" name="Specification">Specification</h2>
<ul>
<li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleSheet-insertRule">insertRule </a></li>
</ul>
<h2 id="Browser_compatibility" style="line-height: 30px;">Browser compatibility</h2>
{{Compat("api.CSSStyleSheet.insertRule")}}
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/API/CSSStyleSheet/deleteRule"><code>deleteRule</code></a></li>
</ul>
|
