How to get a list of all loaded CSS classes in Google Chrome?

问题

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

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

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" ...).

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

Source: 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.

EDIT: misunderstood the question. https://developer.mozilla.org/en-US/docs/Web/API/document.styleSheets

来源：https://stackoverflow.com/questions/31915714/how-to-get-a-list-of-all-loaded-css-classes-in-google-chrome