在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

的一個問題是，你與你的每次循環覆蓋輸出DIV（所以每個規則覆蓋前一個）。 考慮更改這一行：

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

這一行：

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

使得每個迭代將寫入下一個規則。

Answer 2

在這一行：

for (var j in rules){ 

您使用的是換的，這將遍歷的規則對象的屬性，我不認爲這是你想要的。你應該將其更改爲：

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

Answer 3

檢查小提琴.. 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();