We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

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

Example 2

/**
 * 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);
  }
}

Specification

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) 8 (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

See also

Etiquetas y colaboradores del documento

Etiquetas: 
Colaboradores en esta página: fscholz, LeoHirsch
Última actualización por: LeoHirsch,