CSS javascript property deleteRule

Question

Hey, I'm trying to understand why deleteRule is not working for my css object in javascript. I did a very simple test to illustrate. http://codepen.io/wzsun/pen/uzcvI

console.log(cssRule.cssRules.length); <-- returns 2
cssRule.deleteRule(1); // <-- can't delete
cssRule.insertRule("to { -webkit-transform: rotatex(360deg); background-color:blue;}") // <-- this works
console.log(cssRule.cssRules.length); <-- returns 3
console.log(cssRule);
cssRule.deleteRule(2);

I can insert a rule, but I cannot delete it. Thanks for any help.

Answer 1

I was interested in the problem that you showed, and I think I found the answer. If you want to call removeRule, you need to remove the rule using the DOMString key attribute

void            deleteRule(in DOMString key);

and its value is from 0 to 1 (for example, 0%, 50%, 100%). That is why the passed index did not work.

CSSKeyframe.keyText , '10% ', '75% ". " 0% " " 100%"

CSSKeyframesRule MDN.

, keyText (msdn, mdn), Rule()

keyToRemove = cssRule.cssRules[1].keyText;
console.log(cssRule);
console.log(cssRule.cssRules.length);
cssRule.deleteRule(keyToRemove);

.