如何获取Google Chrome浏览器中所有已加载的CSS类的列表? [英] How to get a list of all loaded CSS classes in Google Chrome?

问题描述

有时我需要打印一系列CSS类以找到合适的类.

Sometimes I need to print a list of CSS classes to find an appropriate one.

最适合我的是类似JS控制台中的函数:键入时会加载和过滤JS类列表.

The most suitable for me would be a function like in JS console: JS class list is loaded and filtered when you are typing.

例如，如果我需要记住一个图像类，则输入"Img"，然后加载图像类列表("ImgFolder"，"ImgPencil" ...).

So for example if I need to remember an image class I'm typing "Img" and then a list of image classes is loaded ("ImgFolder", "ImgPencil" ...).

推荐答案

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/

该代码将为您提供数组中页面上所有类的列表.那应该足以让您入门.如果您需要有关过滤类的帮助，请发表评论，我将编辑答案.

The code will give you a list of all the classes on the page in an array. That should be enough to get you started. If you need help with filtering the classes, then leave a comment and I'll edit the answer.

误解了这个问题. https://developer.mozilla.org/zh-CN/docs/Web/API/document.styleSheets

这篇关于如何获取Google Chrome浏览器中所有已加载的CSS类的列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！