9

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

humkins
  • 9,635
  • 11
  • 57
  • 75
  • Interesting reading on this question: http://stackoverflow.com/questions/9320982/reading-documents-css-in-chrome-extension - Basically no way to read external stylesheets without using a proxy – CodingIntrigue Aug 11 '15 at 09:12

2 Answers2

3
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: https://stackoverflow.com/a/23067859/

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

SKisby
  • 35
  • 7
Aniruddh Agarwal
  • 257
  • 3
  • 9
  • You haven't understood my question. I'm talking about all classes which could be loaded with tons of external CSS files and even not applied to any HTML element. – humkins Aug 11 '15 at 06:34
  • Yes, I know there is such property, sure it is possible to extract deeper arrays and process them properly but I'm searching for a kind of browser extension doing this nicely, suggesting filtered class list. – humkins Aug 11 '15 at 08:22
1

The accepted answer wasn't working for me, here is my solution which I've tested in FireFox and Chrome and can say is working. This uses DOMContentLoaded to ensure everything has loaded on the page and can accept a boolean to console.log a unique list or not.

return unique function was sourced from: Get all unique values in a JavaScript array (remove duplicates)

Note: The use of the classList.add / .remove is to remove white space and duplicates from the given tokenlist.

  window.addEventListener('DOMContentLoaded', function() {

    function getAllStyleClasses(returnUniqueOnly) {
      let allTags = document.querySelectorAll('*');
      let allClasses = [];

      for(let i = 0; i < allTags.length; i++) {
        if(allTags[i].classList.length > 0) {
          let classes = allTags[i].classList;

          allTags[i].classList.add("_");
          allTags[i].classList.remove("_");

          let nodeArray = Array.from(classes);
          allClasses.push(nodeArray);
        }
      }

      let concatClasses = [].concat(...allClasses);

      if(returnUniqueOnly == true) {
        let uniqueClasses = concatClasses.filter(onlyUnique);
        console.log(uniqueClasses);
      } else {
        console.log(concatClasses);
      }


      function onlyUnique(value, index, self) {
        return self.indexOf(value) === index;
      }
    }

    getAllStyleClasses(true);
  }, false);

Edit: I needed to download this list (using the page name as a title) into a text file with line breaks, save file sourced from: How to create a file in memory for user to download, but not through server?

  window.addEventListener('DOMContentLoaded', function() {

    function getAllStyleClasses(returnUniqueOnly) {
      let allTags = document.querySelectorAll('*');
      let allClasses = [];

      for(let i = 0; i < allTags.length; i++) {
        if(allTags[i].classList.length > 0) {
          let classes = allTags[i].classList;

          allTags[i].classList.add("_");
          allTags[i].classList.remove("_");

          let nodeArray = Array.from(classes);
          allClasses.push(nodeArray);
        }
      }

      let concatClasses = [].concat(...allClasses);

      if(returnUniqueOnly == true) {
        let uniqueClasses = concatClasses.filter(onlyUnique);
        console.log(uniqueClasses);
        let txtOutput = uniqueClasses.join().split(",").join("\n")
        if(confirm("You're seeing this because you're a developer! Download all styles used on this page?")) {
          let pageTitle = document.title.toLowerCase().replaceAll(' ', '-');
          save('styles-' + pageTitle + '.txt', txtOutput);
        }
      } else {
        console.log(concatClasses);
      }

      function onlyUnique(value, index, self) {
        return self.indexOf(value) === index;
      }
      
      function save(filename, data) {
        const blob = new Blob([data], {type: 'text/csv', oneTimeOnly: true });
        
        if(window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveBlob(blob, filename);
        }
        else{
          const elem = window.document.createElement('a');
          elem.href = window.URL.createObjectURL(blob);
          elem.download = filename;        
          document.body.appendChild(elem);
          elem.click();        
          document.body.removeChild(elem);
        }
      }
    }

    getAllStyleClasses(true);
  }, false);
Moxxi
  • 39
  • 7