在div中显示CSS样式规则（在屏幕上）

Question

假设我的任务是使用Javascript在屏幕上打印所有CSS规则。 我写了以下代码：

var outputDiv = document.createElement("div");
outputDiv.id = "output";
document.body.appendChild(outputDiv);

function cssOutput() {
    var sheets = document.styleSheets;
    if (sheets.length > 0) {
        for (var i in sheets) {
            var rules = sheets[i].cssRules;
            for (var j in rules) {
                var rule = rules[j].cssText;
                console.log(rule);
                document.getElementById("output").innerHTML = rule;
            }
        }
    }
}
//console.log(document.styleSheets[0].cssRules[0].cssText);
cssOutput();

但是，尽管可以记录它们，但我在屏幕上只是看到“未定义”。

Answer 1

检查小提琴。.http: //jsfiddle.net/4cqcpngy/

var outputDiv = document.createElement("div");
outputDiv.id="output";
document.body.appendChild(outputDiv);

function cssOutput(){
     var sheets = document.styleSheets;
     if (sheets.length>0){
        for (var i in sheets){
             var rules = sheets[i].cssRules;
             for (var j = 0; j < rules.length; j++){
                 var rule = rules[j].cssText;
                 console.log(rule);
                 document.getElementById("output").innerHTML += rule;
}}}}


cssOutput();

Answer 2

在这一行：

for (var j in rules){

您正在使用for-in，它将迭代规则对象上的属性，我认为这不是您想要的。 您应该将其更改为：

for (var j = 0; j < rules.length; j++)

Answer 3

一个问题是您在循环的每次迭代中都覆盖了输出div（因此每个规则都覆盖了前一个规则）。 考虑更改此行：

document.getElementById("output").innerHTML = rule;

到这行：

document.getElementById("output").innerHTML += rule; // Note "+=" not "="

这样，每次迭代都会编写下一条规则。