更新1

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中引用的外部文件无法通过代码识别。原因可能是什么？

Sample

在此警报中返回null。

编辑：

令我惊讶的是，相同的代码在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>

从HTML读取css文件会引发错误

1 个答案:

更新1