javascript - 列出使用Javascript的已知CSS类

我正在尝试寻找一种很好的方法来收集给定文档随附的样式表中定义的类的名称。我知道document.StyleSheetList，但解析起来似乎并不容易。我正在寻找的是类似样式表文档的内容，例如:

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

我可以提取类似["my_class", "second_class"]的数组。显然，这是假设dom和样式表已满载的有利情况。

我一直在到处寻找一种做这种事情的好方法，到目前为止，进展甚微。有谁知道如何实现这一目标？谢谢!

最佳答案

这将显示样式表中定义的所有规则。

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 );
    }
}

但事实是，它包括所有规则，而不管是类，标记，id还是其他任何东西。

您将需要更详细地解释非类规则(或组合规则)要发生的情况