In order to change the style sheet specified in a style
element, you can modify the element content:
s = document.getElementsByTagName('style')[0];
s.innerHTML += '.mystyle { font-size: 20px; }';
This does not change the existing rule but appends one that overrides it.
Alternatively, you can use the sheet
property of the style
element as defined in CSSOM:
var sh = document.getElementsByTagName('style')[0].sheet;
sh.insertRule('.mystyle { font-size: 20px; }', sh.cssRules.length);
If you really wanted to replace a rule in the style
element and not just override it, you would need to locate it, traversing the cssRules
object and getting an index, then calling deleteRule
and then insertRule
.