Search code examples
javascriptcssstylesheet

Get unrecognized styles from stylesheet in JS

How can I get the actual text of a stylesheet using JS?

The cssRules property only returns those rules that it recognizes.

eg. I would like to change -webkit-border-radius to -moz-border-radius. Or do some JS wizardry to any element who's style contains myTrigger:true; (Do NOT lecture me on principal.)

Cycling through document.stylesheet's cssRules returns the parsed text minus any unrecognized rules, whether I use cssText, the array of rules, or the default rules.

Is there any way to parse an included stylesheet and view/modify each of the rules as it was actually written?

Solution

  • The only way to do this is to load the stylesheet directly with a JavaScript xmlhttprequest then parse the contents yourself. Then, after doing that, use the JavaScript to insert your modified styles into the head of the HTML document.

    Messy, but it'll work.