從 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>