Question

I was wondering if it was possible to access custom rules placed into a stylesheet. For instance, take:

p {
  line-height: 2em;
  -js-min-line-height: 1.4em;
}

I’ve tried traversing the stylesheet object and grabbing the CSS text but the browser, as it probably should do, does not return the text of properties it doesn’t recognize:

for styleSheet in document.styleSheets
  for rule in styleSheet.cssRules
    console.log rule.cssText

Simply returns:

p { line-height: 1.4; }

Answer 1

It depends on how the CSS is derived. What it depends on is whether or not it is linked, composed, or hard coded. If it is hard coded, then just place an id on the style element, and use document.getElementById("styleId").innerHTML to get the text and then parse it by splitting the string at semi colons. If it is composed by javascript, then it should be easy to just add some extra content in there to retain the style. If it is linked, which I would say is most likely and the hardest case to handle, then I would suggest loading the css into javascript using $.AJAX(), read the text and parse it for what you want, and then use document.getElementsByName("head")[0].appendChild(varHoldingCss) to add the style to your page.