从HTML读取css文件抛出错误

read css file from HTML throws error

本文关键字：出错 错误 文件 css HTML 读取      更新时间：2023-09-26

我有下面的代码读取和追加到一个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中引用的外部文件不能被代码识别。原因是什么?

示例

在此警告中返回null。

编辑:

令我惊讶的是，同样的代码在Mozilla中工作得很好，但在chrome中显示cssrules为空。

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

下面是工作示例

<标题>更新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>

相关文章：