Parse HTML file to grab all ID and Classes for a CSS file

问题

A short while ago, I'm fairly certain I came across an application (or perhaps a plugin for Coda - the IDE I use) which quickly parses a html document and then spits out all of the elements with IDs and Classes for me to use in a CSS file.

Having fully 'got into' zen coding - using the wonderful TEA plugin for Coda, I'm now hot on the heels of this app/plugin again.

I've tried and failed miserably at hunting through Google, but have come up completely empty handed.

Does anyone know of anything which can do this?

Happy New Year everyone!

回答1:

I suppose you're looking for something like http://lab.xms.pl/css-generator/

But I have to warn you -- tools like that one only output the very rough picture of the DOM, without any optimizations. No automated tool will do it better than you can, especially if you're on the zen path.

May CSS3 be with you.

回答2:

I know that this is from 2011 and it is almost the end of 2013, but I was trying to find an answer to this problem on Google and a link to this post came up in the first page of results. I couldn’t quickly find a way to get all class names or ids. So I wrote the following bit of JavaScript.

function printAllElements() {
    var all = document.getElementsByTagName("*");
    var st = "";
    for (var i = 0, max = all.length; i < max; i++) {
        if(all[i].className !== ''){
            st += all[i].className + "<br>";
        }
        if(all[i].id !== ''){
            st += all[i].id + "<br>";
        }
    }
    document.write(st);
}

I hope this helps someone and makes this page more useful.

回答3:

http://unused-css.com/

That's almost what I was looking for...but kind of the opposite :)

回答4:

I don't know the tool you're talking about, but you can create such a tool very easily with SAX for instance. Just use the startElement callback to hunt for "class" and "id" attributes.

回答5:

Building on Jon Petersen's answer, this gets all id's and classes, filters them to the unique ones and prepares the output so it can be pasted into your css file.

    function getAllCSS() {
        var all = document.getElementsByTagName("*");
        var st = [];
        var trailing = " {<br /><br />}<br />";
        for (var i = 0, max = all.length; i < max; i++) {
            if (all[i].className !== '') {
                st.push('.' + all[i].className + trailing);
            }
            if (all[i].id !== '') {
                st.push('#' + all[i].id + trailing);
            }
        }
        var unique = st.filter(function (item, i, ar) { return ar.indexOf(item) === i; });

        document.write(unique.join("<br />"));
    }
    getAllCSS();

来源：https://stackoverflow.com/questions/4574208/parse-html-file-to-grab-all-id-and-classes-for-a-css-file

标签

html

css

css-selectors

emmet