我想循环遍历文档样式表并循环遍历每个样式表的规则。
我正在做以下事情:
var sheets = typeof sheet !== "undefined" ? [sheet] : document.styleSheets;
for (var i = 0, l = sheets.length; i < l; i++) {
sheet = sheets[i];
if (typeof sheet.cssRules === 'undefined' || !sheet.cssRules) {
continue;
}
for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
var rule = sheet.cssRules[j];
//some code
}
}
问题是其中一个文档样式表是从Google Maps API动态加载的。因此,以下行失败并给出跨域安全性错误,指出cssRules不是可读属性:
if (typeof sheet.cssRules === "undefined" || !sheet.cssRules) {
有没有办法检查cssRules是否可读?我只是想跳过错误并继续下一个样式表。
这在Opera 12.17和Firefox(开发人员版)
中失败了答案 0 :(得分:0)
你可以这样做:
var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
for (var x = 0; x < classes.length; x++) {
}
答案 1 :(得分:0)
我找到了一个有效的解决方案。我刚刚使用了try catch块。
以下代码有效:
var sheets = typeof sheet !== "undefined" ? [sheet] : document.styleSheets;
for (var i = 0, l = sheets.length; i < l; i++) {
sheet = sheets[i];
try {
if (typeof sheet.cssRules === "undefined" || !sheet.cssRules) {
continue;
}
}
catch (err) {
continue;
}
for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
var rule = sheet.cssRules[j];
//some code
}
}
这样,在Opera中没有错误,并且在Firefox中捕获了异常,因此脚本不会停止运行。
答案 2 :(得分:0)
如果您想通过避免其他域样式表来避免交叉浏览问题。您可以根据自己的要求添加以下条件。
// get current site url
function get_hostname(url) {
var m = url.match(/^http:\/\/[^/]+/);
return m ? m[0] : null;
}
// your stylesheet loop add one more condition in if statement.
var sheets = typeof sheet !== "undefined" ? [sheet] : document.styleSheets;
for (var i = 0, l = sheets.length; i < l; i++) {
sheet = sheets[i];
if (typeof sheet.cssRules === 'undefined' || !sheet.cssRules || location.origin != get_hostname(sheet.href)) {
continue;
}
for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
var rule = sheet.cssRules[j];
//some code
}
}