CSSStyleSheet.insertRule()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

El método CSSStyleSheet.insertRule() inserta una nueva regla de estilo en la actual hoja de estilos.

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 DOMString como parámetro se dispara una DOMException con el código SYNTAX_ERR.

Syntax

stylesheet.insertRule(regla, índice)

Parameters

  • regla es un DOMString que contiene la regla que se va a insertar (selector y declaración).
  • índice es un unsigned int que representa la posicion en la que se va a insertar.

Ejemplos

Ejemplo 1

js
// Insertar una nueva regla al principio de mi hoja de estilos
myStyle.insertRule("#blanc { color: white }", 0);

Example 2

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 orden(i.e., es cascada); aquellos sin necesidad de
 * 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);
  }
}

Especificaciones

Specification
CSS Object Model (CSSOM)
# dom-cssstylesheet-insertrule

Compatibilidad con navegadores

BCD tables only load in the browser

See also