如果css样式表中存在@import,我无法查询cssRules.
它是否符合网络标准?
或者知道Firefox的局限性?
注意:我从同一个域导入css文件.
var style_rules = document.styleSheets[0].cssRules;
console.log(style_rules);
底层对象不支持参数或操作
[打破此错误] var style_rules = document.styleSheets [0] .cssRules;
最佳答案
属性document.styleSheets [0] .cssRules是一个CSSRuleList(除了在IE6-8中,你应该使用styleSheets [0] .rules作为css规则和styleSheets [0].导入的导入).此CSSRuleList在列表中具有一定数量的CSSRules.这些规则可以是不同类型的.例如,@ import CSSRule实现了CSSImportRule接口,而’普通’样式声明CSSRule实现了CSSStyleRule接口.
我们可以检测CSSRule是否是@import css规则,检查是否rule.type == IMPORT_RULE,其中IMPORT_RULE是3.如果它是CSSImportRule,我们可以获取其styleSheet属性以获取导入的样式表中的css规则和重复上述过程.
原文链接:https://www.f2er.com/css/427553.html我们可以检测CSSRule是否是@import css规则,检查是否rule.type == IMPORT_RULE,其中IMPORT_RULE是3.如果它是CSSImportRule,我们可以获取其styleSheet属性以获取导入的样式表中的css规则和重复上述过程.
可以通过获取cssText属性:rule.cssText来获取任何CSSRule的可解析文本表示.但是,在Internet Explorer 6-8中,我们必须使用rule.style.cssText.
换句话说,我们可以使用以下代码获取样式表中的所有CSSRule(包括其导入).我还将一个工作样本放入jsfiddle.请注意,此代码在IE6-8中不起作用.对于此解决方案,我建议您在SO here上检查我的解决方案是否存在另一个问题.
/**
* Get the css rules of a stylesheet which apply to the htmlNode. Meaning its class
* its id and its tag.
* @param CSSStyleSheet styleSheet
*/
function getCssRules(styleSheet) {
if ( !styleSheet )
return null;
var cssRules = new Array();
if (styleSheet.cssRules) {
var currentCssRules = styleSheet.cssRules;
// Import statement are always at the top of the css file.
for ( var i = 0; i < currentCssRules.length; i++ ) {
// cssRules contains the import statements.
// check if the rule is an import rule.
if ( currentCssRules[i].type == 3 ) {
// import the rules from the imported css file.
var importCssRules = getCssRules(currentCssRules[i].styleSheet);
if ( importCssRules != null ) {
// Add the rules from the import css file to the list of css rules.
cssRules = addToArray(cssRules,importCssRules);
}
// Remove the import css rule from the css rules.
styleSheet.deleteRule(i);
}
else {
// We found a rule that is not an CSSImportRule
break;
}
}
// After adding the import rules (lower priority than those in the current stylesheet),// add the rules in the current stylesheet.
cssRules = addToArray(cssRules,currentCssRules);
}
return cssRules;
}
/**
* Since a list of rules is returned,we cannot use concat.
* Just use old good push....
* @param CSSRuleList cssRules
* @param CSSRuleList cssRules
*/
function addToArray(cssRules,newRules) {
for ( var i = 0; i < newRules.length; i++ ) {
cssRules.push(newRules[i]);
}
return cssRules;
}
/**
* Finds all CSS rules.
*/
function getCSSRules() {
var cssRules = new Array();
// Loop through the stylesheets in the html document.
for ( var i = 0; i < document.styleSheets.length; i++ ) {
var currentCssRules = getCssRules(document.styleSheets[i])
if ( currentCssRules != null )
cssRules.push.apply(cssRules,currentCssRules);
}
return cssRules;
}
// An array of all CSSRules.
var allCSSRules = getCSSRules();
for ( var i = 0; i < allCSSRules.length; i++ ) {
console.log(allCSSRules[i].cssText);
}