有没有办法列出网页的所有可用 css 类？

Posted 2023-03-04

【中文标题】有没有办法列出网页的所有可用 css 类？

【英文标题】：Is there a way to list all available css classes for a web page?

【发布时间】：2020-03-28 11:02:16

【问题描述】：

我想知道是否有一种简单的方法可以列出所有可用的 css 类，这些类通过 javascript 中的单个 html 页面加载，或者通过 chrome 或 firefox 中的开发者控制台加载。

谢谢

【问题讨论】：

这能回答你的问题吗？ How to get a list of all loaded CSS classes in Google Chrome?

使用 ES6：[].concat(...[...document.querySelectorAll('*')].map(e=>[...e.classList])).filter((d,i,a)=>a.indexOf(d)==i).sort()

该脚本打印实际应用于页面中任何元素的所有类，它不列出已定义但未使用或删除的类

@JasonYaraghi 的脚本非常适合我的需要！

【参考方案1】：

有点晚了，但是……

  for (let link of document.querySelectorAll("link, style")) 
    try 
      if (!link.sheet) 
        console.warn("Warning:", "Property 'sheet' is not set on element", link)
       else
        for (let rule of link.sheet.rules) 
          console.log(rule.selectorText)
        ;
     catch (e) 
      console.warn("Warning:", e.message, ". Try set crossorigin='anonymous' on element", link)
    
  ;

或在 Chrome 开发工具窗口 (F-12) 中找到“样式”选项卡。在“过滤器”文本框的右侧有选项“.cls”。单击它，应该会出现“添加新类”。聚焦它并按Ctrl + Space。它应该列出当前打开的文档中所有可用的类。

This is how it looks like

【讨论】：

Property sheet 可能为 null，从而导致类型错误。你应该处理这种情况。

嗨 Zygmunt，很遗憾我的脚本出现了一些问题，因为由于浏览器的 cors 政策，似乎无法从 javascript 访问“规则”属性。但是我会接受您的回答，因为您对样式过滤器的建议很简洁并且有效。谢谢

尝试在链接元素上设置 crossorigin="anonymous"。像这样。让我知道它是否适合您。

【参考方案2】：

是的，基本上你会启动控制台并输入：

document.querySelectorAll("*[class]");

在这种情况下，querySelectorAll 方法就像 CSS 属性选择器一样工作。在 MDN https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll 中阅读更多信息

【讨论】：

这是朝着正确方向迈出的一步，因为您实际上可以从该调用的结果中扣除该列表。我将对此进行更深入的研究，非常感谢您提供这些信息。

【参考方案3】：

您可以轻松地按元素执行此操作，在 Chrome 开发工具中使用元素选项卡选择元素，然后转到“计算”选项卡，该选项卡显示每个元素附加的所有内容。

如果它是一个包含很多元素的大页面，并且您需要查看所有 CSS，我会直接查看元素并查看 head 或 header html 元素，然后直接查看文件。根据页面的架构，一些开发人员将其放在页脚元素以及一些内联元素中。

您也可以在 chrome 开发工具中按 CTRL+F 并编写“样式表”，它应该会拉出所有页面附加的 CSS 表格。

【讨论】：

不过，在 chrome 开发工具中，您可以获得链接到您选择的单个元素的所有类和样式，我想知道是否有可能拥有加载的每个样式表的完整 css 类列表页面

是的，我明白了，但这就是为什么我能说的最好的就是“有点”。您可以一次查看一个文件并自己编译它们，但是，我不确定如何在一个语句或视图中执行此操作，而无需编写一些特殊的 javascript 来为您编译它们。