javascript - 使用javascript访问外部css的内容

Question

获取内部CSS代码很容易，例如:

var css = '';
$('style').each(function(){
     css+=$(this).html();
});

现在如果有一个像这样的 css 文件的外部链接:

<link href="style.css" />

有没有办法知道使用 javascript/jquery 可以使用哪些 css 代码？

Answer 1

Is there anyway to know what css codes are available using javascript/jquery?

是的。有一个styleSheets collection包含 StyleSheet对象，其中大部分将是 CSSStyleSheet objects ，它有一个 cssRules 属性(在旧 IE 上只是 rules)，它是一个 CSSRuleList包含 CSSRule对象。样式表是外部的(通过 link)还是内联的(通过 style)并不重要。

例子:

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 + " is not a 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;
}