Rimuovere le regole CSS da JavaScript

Question

Come rimuovere le regole CSS da JavaScript?

var elStyle = document.querySelector('style#the-style'); 
var stylesheet = elStyle.sheet; 
var rules = stylesheet.cssRules; 
for (var i=0; i<rules.length; i++) { 
    var rule = rules[i]; 
    if (rule.selectorText === '#rule2 em') { 
    // TODO: remove this rule 
    break; 
    } 
} 

http://jsfiddle.net/e3zebmqv/

sono riuscito a rimuovere lo stile dal rule.style.color='' ma la regola esiste ancora. Ci sono API da rimuovere? O dovrei usare innerHTML?

UPDATE

In questo caso, mi piacerebbe per rimuovere regole di stile, non style properties.

(non so circa il dominio di Stack Overflow bene. Spero che questa modifica era giusto.)

Answer 1

qui è un esempio di come si può fare questo:

var styleTag = document.getElementById ("the-style"); 
var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet; 

if (sheet.cssRules) { // all browsers, except IE before version 9 
    for (var i=0; i<sheet.cssRules.length; i++) { 
     if (sheet.cssRules[i].selectorText === '#rule2 em') {   
      //console.log(sheet.cssRules[i]); 
      sheet.deleteRule (i); 
     } 
    } 
} 
else 
{ // Internet Explorer before version 9 
    for (var i=0; i<sheet.rules.length; i++) { 
     if (sheet.rules[i].selectorText === '#rule2 em') {   
      // console.log(sheet.cssRules[i]); 
      sheet.removeRule (i); 
     } 
    } 
} 

E su JSFiddle http://jsfiddle.net/n53u7cvm/1/

Answer 2

Mentre è possible to edit the stylesheet programatically, è dotato di una serie di problemi del browser.

Ecco come ottenere le regole da un foglio di stile:

var rules = new Array(); 
if (document.styleSheets[1].cssRules) { 
    rules = document.styleSheets[1].cssRules; 
} 
else if (document.styleSheets[1].rules) { 
    rules = document.styleSheets[1].rules; 
} 

E se si pensa che è un po 'brutto, c'è di peggio da lì!

Aggiornamento

posso vedere la questione è stato modificato ...

Le seguenti opere (updated JSFiddle) ...

if (selector === '#rule2 em') { 
    rule.style.color = 'black'; 
}