How to get list of Css class use in the HTML file?


Tags: html,css

Problem :

I need list of classes used in an html file. Is there any tool where i can get list of classes in the HTML file?



Solution :

this should work and it doesn't need jquery.

var used = [];
var elements = null;

//get all elements
if (typeof document.getElementsByTagName != 'undefined') {
    elements = document.getElementsByTagName('*');
}

if (!elements || !elements.length) {
    elements = document.all; // ie5
}

//loop over all element
for (var i = 0; i < elements.length; i++){

    //loop over element's classes
    var classes = elements[i].className.split(' ');
    for (var j = 0; j < classes.length; j++) {

        var name = classes[j];

        //add if not exists
        if (name.length > 0 && used.indexOf(name) === -1) {
            used.push(name);
        }
    }
}

alert(used.join(' '));

more functional approach

var elements = document.getElementsByTagName('*');

var unique = function (list, x) {
    if (x != "" && list.indexOf(x) === -1) {
        list.push(x);
    }
    return list;
};

var trim = function (x) { return x.trim(); };

var classes = [].reduce.call(elements, function (acc, e) {
    return e.className.split(' ').map(trim).reduce(unique, acc);
}, []);

    CSS Howto..

    how to apply two classes of css on same element?

    How to disable and enable css rule

    How to prevent image in fluid container displayed cropped

    why is the space (shown in image) is added below when using vertical-align? How to fix it?

    “Pull center” in Bootstrap: A -D- B -E- C columns collapsing to A-B-C // D-E, how to get B between D and E?

    How to emulate Google's thick, red underline text decoration

    How to expand and
  • to fit the width of the
      using css? (or even jquery)
  • CSS and JS: How to Inflate the Size of a Tile In Grid

    JS/JQuery: How to switch class several times in a loop way?

    How to center text with CSS?

    How to position an element at the TOP LEFT corner of a page using CSS?

    How do I repeat select elements in HTML

    CSS show horizontal scroll bars?

    How to take whole available width in bootstrap css?

    Yii2 how to include multiple css files from specific view or controller action

    How can I avoid space while using pseudo-elements in multi-line markup?

    How to reproduce the following effect in CSS, stuck at padding(I think) Bootstrap 3.0

    How to keep the underline effect in this demo stay using CSS?

    How to use jQuery to fade in/out li a:hover css background-color?

    How to size a content div to cover the entire content area in jQuery Mobile

    How to call a function for each element with a particular class, every time the window scrolls (jquery))

    Hide element, but show CSS generated content

    How can I track down a:hover jquery source?

    How to select a .list-cell, in javaFX CSS

    how to make css sub menu links longer than parent link

    How to make css jquery autofit navigation?

    How to remove the arrows in a scroll bar through CSS

    How to make text flow from left right bootstrap

    how to add dots (…) with the same width?

    How to make css search form responsive