如何获取 Google Chrome 中所有加载的 CSS 类的列表？答案

【问题标题】：How to get a list of all loaded CSS classes in Google Chrome?如何获取 Google Chrome 中所有加载的 CSS 类的列表？
【发布时间】：2015-11-02 03:22:29
【问题描述】：

有时我需要打印一个 CSS 类列表来找到合适的。

最适合我的应该是类似 JS 控制台中的功能：在您键入时加载和过滤 JS 类列表。

例如，如果我需要记住一个图像类，我输入“Img”，然后加载图像类列表（“ImgFolder”、“ImgPencil”...）。

【问题讨论】：

关于这个问题的有趣阅读：stackoverflow.com/questions/9320982/… - 基本上没有办法在不使用代理的情况下读取外部样式表

标签： css google-chrome

【解决方案1】：

var allTags = document.body.getElementsByTagName('*');
var classNames = {};
for (var tg = 0; tg< allTags.length; tg++) {
    var tag = allTags[tg];
    if (tag.className) {
      var classes = tag.className.split(" ");
    for (var cn = 0; cn < classes.length; cn++){
      var cName = classes[cn];
      if (! classNames[cName]) {
        classNames[cName] = true;
      }
    }
    }   
}
var classList = [];
for (var name in classNames) classList.push(name);
alert(classList);

来源：http://snipplr.com/view/6488/

该代码将以数组的形式为您提供页面上所有类的列表。这应该足以让你开始。如果您在过滤类方面需要帮助，请发表评论，我将编辑答案。

编辑：误解了这个问题。 https://developer.mozilla.org/en-US/docs/Web/API/document.styleSheets

【讨论】：

你还没有理解我的问题。我说的是所有可以加载大量外部 CSS 文件甚至不应用于任何 HTML 元素的类。
是的，我知道有这样的属性，当然可以提取更深的数组并正确处理它们，但我正在寻找一种浏览器扩展，可以很好地做到这一点，建议过滤类列表。