获取内部CSS代码很容易,例如:
var css = '';
$('style').each(function(){
css+=$(this).html();
});
现在如果有一个像这样的 css 文件的外部链接:
<link href="style.css" />
有没有办法知道使用 javascript/jquery 可以使用哪些 css 代码?
最佳答案
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;
}
关于javascript - 使用javascript访问外部css的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38572198/