Question

很容易获得内部css代码，如：

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

现在，如果有一个css文件的外部链接，如：

<link href="style.css" />

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

Answer 1

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

是。有一个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;
}

使用javascript访问外部css的内容

1 个答案: