在網(wǎng)頁開發(fā)中，我們經(jīng)常需要遍歷CSS樣式，這樣可以輕松的查看當(dāng)前頁面的樣式結(jié)構(gòu)。下面就來介紹一下如何使用JavaScript遍歷CSS樣式。

var allCSS = document.styleSheets;  //獲取所有CSS樣式表
for (var i = 0; i< allCSS.length; i++) {  //遍歷每一個(gè)CSS樣式表
var rules = allCSS[i].cssRules;  //獲取當(dāng)前CSS樣式表的所有規(guī)則
for (var j = 0; j< rules.length; j++) {  //遍歷每一個(gè)CSS規(guī)則
var selector = rules[j].selectorText;  //獲取CSS規(guī)則的選擇器
var props = rules[j].style;  //獲取CSS規(guī)則的屬性
console.log(selector + ':');  //輸出選擇器
for (var k = 0; k< props.length; k++) {  //遍歷每一個(gè)CSS屬性
console.log('\t' + props[k] + ': ' + props[props[k]] + ';');  //輸出屬性和屬性值
}
}
}

上述代碼首先獲取了所有的CSS樣式表，然后遍歷每一個(gè)CSS樣式表，再遍歷每一個(gè)CSS規(guī)則，從CSS規(guī)則中獲取選擇器和屬性，并輸出到控制臺(tái)上。

通過這樣的方式，我們可以方便地查看當(dāng)前頁面的CSS樣式結(jié)構(gòu)，為后續(xù)的調(diào)試和優(yōu)化提供了方便。