jquery - Access content of external css using javascript -
its easy internal css code like:
var css = ''; $('style').each(function(){ css+=$(this).html(); });
now if there external link css file like:
<link href="style.css" />
is there anyway know css codes available using javascript/jquery?
is there anyway know css codes available using javascript/jquery?
yes. there stylesheets
collection containing stylesheet
objects, of cssstylesheet
objects, have cssrules
property (just rules
on old ie) cssrulelist
containing cssrule
objects. doesn't matter whether styleshet external (via link
) or inline (via style
).
example:
var foreach = array.prototype.foreach; foreach.call(document.stylesheets, function(sheet, index) { if (sheet.cssrules || sheet.rules) { log("sheet #" + index); foreach.call(sheet.cssrules || css.rules, function(rule, ri) { log("- rule #" + ri + ": " + rule.csstext); }); } else { log("sheet #" + index + " not cssstylesheet"); } }); function log(msg) { var p = document.createelement('pre'); p.appendchild( document.createtextnode(msg) ); document.body.appendchild(p); }
.foo { color: blue; } .bar { color: red; } pre { margin: 0; }
Comments
Post a Comment