JS To Insert CSS Into Page

/ all-scribbly, javascript / By

u can also do this using DOM Level 2 CSS interfaces (MDN):

var sheet = window.document.styleSheets[0];
sheet.insertRule(‘strong { color: red; }’, sheet.cssRules.length); 

…on all but (naturally) IE8 and prior, which uses its own marginally-different wording:

sheet.addRule(‘strong’, ‘color: red;’, -1); 

There is a theoretical advantage in this compared to the createElement-set-innerHTML method, in that you don’t have to worry about putting special HTML characters in the innerHTML, but in practice style elements are CDATA in legacy HTML, and ‘<’ and ‘&’ are rarely used in stylesheets anyway.
You do need a stylesheet in place before you can started appending to it like this. That can be any existing active stylesheet: external, embedded or empty, it doesn’t matter. If there isn’t one, the only standard way to create it at the moment is with createElement.

HOW TO REMOVE :::::::::::::::

CSSStyleSheet.deleteRule()

The CSSStyleSheet method deleteRule() removes a rule from the stylesheet object.

Syntax

cssStyleSheet.deleteRule(index)

Copy to Clipboard

Parameters

  • index

    The index into the stylesheet’s CSSRuleList indicating the rule to be removed.

Return value

undefined

Example

This example removes the first rule from the stylesheet myStyles.

 myStyles.deleteRule(0);

Related Posts