我試圖找到一種好的方法來(lái)收集給定文檔中包含的樣式表中定義的類名。我知道文件的事。樣式她列出來(lái)了，但是看起來(lái)不太容易解析。我要找的是一個(gè)樣式表文檔，比如:

.my_class { 
    background: #fff000; 
}
.second_class {
    color: #000000;
}

我可以提取一個(gè)類似于["my_class "，" second_class"]的數(shù)組。這顯然假設(shè)了完全加載的dom和樣式表的有利場(chǎng)景。

我一直在到處尋找一個(gè)好方法來(lái)做這樣的事情，到目前為止，沒(méi)有取得什么進(jìn)展。有人知道如何完成這件事嗎？謝謝！

這將顯示樣式表中定義的所有規(guī)則。

var allRules = [];
var sSheetList = document.styleSheets;
for (var sSheet = 0; sSheet < sSheetList.length; sSheet++)
{
    var ruleList = document.styleSheets[sSheet].cssRules;
    for (var rule = 0; rule < ruleList.length; rule ++)
    {
       allRules.push( ruleList[rule].selectorText );
    }
}

然而，事實(shí)是它包含了所有的規(guī)則，不管是類、標(biāo)簽、id還是其他什么..

您需要更詳細(xì)地解釋您希望非類規(guī)則(或組合規(guī)則)發(fā)生什么

您在document . style sheets(https://developer.mozilla.org/en/DOM/document.styleSheets)方面進(jìn)展順利

https://developer.mozilla.org/en/DOM/stylesheet.cssRules

在Firefox + Firebug中，這里有一個(gè)快速而簡(jiǎn)單的方法將所有的類selectorTexts輸出到控制臺(tái)。

var currentSheet = null;
    var i = 0;
    var j = 0;
    var ruleKey = null;

    //loop through styleSheet(s)
    for(i = 0; i<document.styleSheets.length; i++){
        currentSheet = document.styleSheets[i];

        ///loop through css Rules
        for(j = 0; j< currentSheet.cssRules.length; j++){

            //log selectorText to the console (what you're looking for)
            console.log(currentSheet.cssRules[j].selectorText);

            //uncomment to output all of the cssRule contents
            /*for(var ruleKey in currentSheet.cssRules[j] ){
                 console.log(ruleKey +': ' + currentSheet.cssRules[j][ruleKey ]);
            }*/
        }
    }

除了作為重構(gòu)過(guò)程的一部分，這可能不是你真正想做的事情，但這里有一個(gè)函數(shù)應(yīng)該做你想做的事情:

function getClasses() {
    var classes = {};
    // Extract the stylesheets
    return Array.prototype.concat.apply([], Array.prototype.slice.call(document.styleSheets)
        .map(function (sheet) {
            if(null == sheet || null == sheet.cssRules) return;
            // Extract the rules
            return Array.prototype.concat.apply([], Array.prototype.slice.call(sheet.cssRules)
                .map(function(rule) {
                    // Grab a list of classNames from each selector, making sure a selectorText exists (will throw errors otherwise on Media Queries)
                    return (rule.selectorText && rule.selectorText.match(/\.[\w\-]+/g)) || [];
                })
            );
        })
    ).filter(function(name) {
        // Reduce the list of classNames to a unique list
        return !classes[name] && (classes[name] = true);
    });
}

怎么樣

。一些事情。其他_什么？

你想要一個(gè)已經(jīng)存在的類名池嗎？還是一群選擇者？

不管怎樣，你有沒(méi)有嘗試過(guò)遍歷document.styleSheets[i]。cssRules？它給出了選擇器文本。用一些正則表達(dá)式來(lái)解析應(yīng)該更容易...

需要跨瀏覽器嗎？

您可以用jQuery來(lái)完成這個(gè)任務(wù)。例如

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
  $(document).ready(function(){
      var allobjects = $("*")
  });
</script>

查看jQuery網(wǎng)站:http://api.jquery.com/all-selector/