从 HTML 读取 css 文件抛出错误

Question

我有以下代码可以读取并附加到 div 标签。（我需要实现这一点。）

var totalCss= "\n";
    var requiredSheets = ['test.css']; 
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var s = 0; s <= classes.length; s++) {
        var cssRules = document.styleSheets[s].cssRules ||
                document.styleSheets[s].rules || []; 
        for (var c = 0; c < cssRules.length; c++) {
            totalCss+= (cssRules[c].cssText + '\n');
        }
    }

Test.css 在 HTML 的同一个文件夹中。

我的 test.css 具有以下属性。（这只是示例）

.test triangle {

    stroke: #000;
    stroke-opacity: .75;
    shape-rendering: crispEdges;
}

.test square {
    stroke-opacity: .75;
}

.test circle {
    stroke-opacity: 0;
}

.test .line {
    fill: none; 

}

当我运行代码片段时，我得到了

没有规则定义错误

. 如果样式嵌入在同一个 html 文件中，则属性可以通过代码获取。 但是html中引用的外部文件没有被代码识别。可能是什么原因？

样本

在此警报中返回空值。

编辑：

令我惊讶的是，相同的代码在 Mozilla 中运行良好，但在 chrome 中显示 cssrules null。

Answer 1

一个文档有多个样式表。 所以你必须循环所有的样式表。

下面是工作示例

更新 1

添加ajax获取与页面链接的外部css

 var style = "\\n"; for (var s = 0; s < document.styleSheets.length; s++) { var cssRules = document.styleSheets[s].cssRules || document.styleSheets[s].rules || []; // IE support for (var c = 0; c < cssRules.length; c++) { style += (cssRules[c].cssText + '\\n'); } } console.log(style); //Request for each external css $("link").each(function() { if (this.href) { $.get(this.href, function(css) { console.log(css); }); } });

 .box { position: absolute; background-color: red; height: 10px; width: 10px; } #car, .car { position: absolute; background-color: red; height: 11px; width: 10px; } }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>