使用Javascript列出已知的CSS类

我试图找到一种收集给定文档中包含的样式表中定义的类名称的好方法。我知道

document.StyleSheetList

，但它似乎不容易解析。我想要的是样式表文档，例如：

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

我可以提取一个数组，比如

[“我的类”，“第二类”]

。这显然假设了一个完全加载dom和样式表的有利场景

我一直在到处寻找一个好的方法来做这样的事情，到目前为止，进展甚微。有没有人知道如何做到这一点？谢谢

怎么样

.什么，还有什么

您想要一个存在的类名池吗？还是一堆选择器

无论如何，您是否尝试过遍历document.styleSheets[i].cssRules？它为您提供选择器文本。用一些regexp功夫来解析它应该更容易

---

您需要交叉浏览吗？

您可以用jQuery来实现这一点。例如

<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>

$（文档）.ready（函数（）{
变量allobjects=$（“*”）
});

---

请访问jQuery网站：

您正在使用document.styleSheets(https://developer.mozilla.org/en/DOM/document.styleSheets)

在Firefox+Firebug中，有一个快速而肮脏的方法可以将所有类selectorTexts输出到控制台

    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 ]);
            }*/
        }
    }

var currentSheet=null；
var i=0；
var j=0；
var-ruleKey=null；
//循环浏览样式表
对于（i=0；i这将显示样式表中定义的所有规则

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

var allRules=[]；
var sSheetList=document.styleSheets；
对于（var sSheet=0；sSheet

但问题是，它包含了所有规则，而不管是类、标记、id还是其他

您需要更详细地解释对于非类规则（或组合规则）您希望执行的操作。
这可能不是您真正想要执行的操作，除非是作为重构过程的一部分，但以下是一个函数，它应该执行您想要的操作：

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
                    return rule.selectorText.match(/\.[\w\-]+/g) || [];
                })
            );
        })
    ).filter(function(name) {
        // Reduce the list of classNames to a unique list
        return !classes[name] && (classes[name] = true);
    });
}

你是在寻找在所有浏览器中都能工作的东西，还是只是为了开发？所谓“CSS类”，你的意思是“所有选择器，不管是否提到HTML类”、“包含类选择器的选择器”、“作为类选择器的选择器位”吗或者别的什么？这会抓取文档中的所有HTML元素。它不会说明任何关于样式表的问题。我非常喜欢这个答案。不知道为什么会投反对票。你可以将所有文档对象弹出到一个数组中并读取它们的类……OP声明的
类定义在给定文档所包含的样式表中，因此你需要首先获取元素来决定文档中使用哪些类。哦，我看到了混乱。OP试图读取所有包含的样式表中的样式，而不是所有文档对象中的类。措辞含糊不清。我对措辞不满意-我确实希望在文档中包含或链接到的样式表中定义选择器。我最终选择了在遍历document.styleSheets数组时，我实际上在实现中使用了
document.styleSheets[].cssRules
，但有点假设会有其他方式（我实际上错误地认为jQuery包含了这个功能——不过，现在我也可以提供它了）。我实际上最终实现了一些非常类似的东西（可在此处找到：）@Fred，只是浏览了一下您在github中的代码。。对于定义的类，您需要说明
.class1.class2
，
标记.class
和
#id.class
情况。对于未使用的类，请小心，因为有些类可能是从javascript使用的（事件等），因此当您检查DOM时，它们将不在DOM中（如果这种情况对您很重要…）
Uncaught-DOMException:未能从“CSSStyleSheet”读取“cssRules”属性：无法访问规则
@Berto99是的，这些将是另一个域上的css文件。浏览器不通过此api授予对这些文件的访问权限。执行此操作时，我得到：
SecurityError:操作不安全。对于（j=0；j
是否有一种改进，允许它绕过空的sheet.cssRules属性（例如，当样式表直接通过文件系统访问而不是通过web服务器提供时，会遇到什么情况？NVM，我刚刚找到了答案。在“//提取规则”上方添加以下行：if（null==sheet | | null==sheet.cssRules）return；