使用 Javascript 列出已知的 CSS 类

Posted 2023-05-09

【中文标题】使用 Javascript 列出已知的 CSS 类

【英文标题】：Listing known CSS classes using Javascript

【发布时间】：2011-06-06 19:32:41

【问题描述】：

我正在尝试找到一种好方法来收集在给定文档中包含的样式表中定义的类的名称。我知道document.StyleSheetList，但它似乎不容易解析。我正在寻找类似的样式表文档，例如：

.my_class  
    background: #fff000; 

.second_class 
    color: #000000;

我可以提取像["my_class", "second_class"] 这样的数组。这显然假设了完全加载的 dom 和样式表的有利情况。

我一直在到处寻找做这种事情的好方法，到目前为止，进展甚微。有谁知道如何解决这个问题？谢谢！

【问题讨论】：

您是在寻找适用于所有浏览器的东西，还是只是为了开发？

“CSS 类”是指“所有选择器，无论是否提及 html 类”、“包含类选择器的选择器”、“作为类选择器的选择器位”或其他什么?

【参考方案1】：

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

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 还是其他什么的......

您需要更详细地解释您希望对非类规则（或组合规则）发生什么

【讨论】：

我实际上最终实现了一些非常相似的东西（可在此处获得：gist.github.com/774111）。

@Fred，刚刚浏览了您在 github 中的代码。对于已定义的类，您需要考虑 .class1.class2、tag.class 和 #id.class 情况。对于未使用的类，请小心，因为有些类可能从 javascript 中使用（事件等..），因此当您检查 DOM 时它们不会在 DOM 中（如果这种情况对您很重要..）

Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

@Berto99 是的，那些将是不同域上的 css 文件。浏览器不会通过此 api 授予访问权限。

【参考方案2】：

您在 document.styleSheets (https://developer.mozilla.org/en/DOM/document.styleSheets) 上步入正轨

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

这是在 Firefox + Firebug 中将所有类选择器文本输出到控制台的快速而肮脏的方法。

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

【讨论】：

当我这样做时，我得到：SecurityError: The operation is insecure. for(j = 0; j< currentSheet.cssRules.length; j++)

【参考方案3】：

除了作为重构过程的一部分之外，这可能不是您真正想做的事情，但这里有一个函数应该可以满足您的需求：

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

【讨论】：

是否有改进可以绕过 NULL sheet.cssRules 属性（例如在通过文件系统直接访问样式表时遇到的情况，而不是通过网络提供服务器？

NVM，我刚刚想通了。在“//提取规则”正上方添加以下行：

if(null == sheet || null == sheet.cssRules) return;

【参考方案4】：

怎么样

.something .other_something?

您想要一个现有的类名池吗？还是选择器池？

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

你需要跨浏览器吗？

【讨论】：

我实际上确实在我的实现中使用了document.styleSheets[].cssRules，但有点假设会有其他方式（我实际上错误地认为 jQuery 包含了这个功能 - 我现在可以贡献它，因为我已经完成了不过）。

【参考方案5】：

你可以用 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>

查看 jQuery 网站：http://api.jquery.com/all-selector/

【讨论】：

这将抓取文档中的所有 HTML 元素。它不会说任何关于样式表的内容。

我非常喜欢这个答案。不知道为什么投反对票。您可以将所有文档对象弹出到一个数组中并读取它们的类... OP 声明 classes defined in the stylesheets included with a given document 因此您需要首先获取元素以决定在文档中使用哪些类。

哦，我明白了。 OP 正在尝试读取所有包含的样式表中的样式，而不是所有文档对象中的类。措辞含糊。

我的措辞不好 - 我确实希望样式表中定义的选择器包含在文档中/或链接到文档中。我最终遍历了 document.styleSheets 数组。