Question

不久之前，我很确定我遇到了一个应用程序（或者也许是Coda的插件 - 我使用的IDE），它可以快速解析一个html文档，然后使用ID和Classes扫出所有元素。我在CSS文件中使用。

完全'进入'zen编码 - 使用Coda的精彩TEA插件，我现在再次热衷于这个应用程序/插件。

我曾试图通过谷歌狩猎而惨遭失败，但却完全空手而归。

有没有人知道有什么能做到这一点？

大家新年快乐！

Answer 1

我知道这是从2011年开始，几乎是2013年底，但我试图在Google上找到这个问题的答案，并在结果的第一页中找到了这篇文章的链接。我无法快速找到获取所有类名或ID的方法。所以我写了下面的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);
}

我希望这可以帮助某人并使这个页面更有用。

Answer 2

我想你正在寻找像http://lab.xms.pl/css-generator/

这样的东西

但是我必须警告你 - 像那样的工具只输出DOM的粗略图片，没有任何优化。没有任何自动化工具可以做得更好，特别是如果你在禅道上。

五月CSS3和你在一起。

Answer 3

http://unused-css.com/

这几乎就是我所寻求的......但恰恰相反：）

Answer 4

我不知道您正在谈论的工具，但您可以使用SAX轻松创建此类工具。只需使用startElement回调来搜索“class”和“id”属性。

Answer 5

在Jon Petersen的回答的基础上，这将获取所有ID和类，将它们过滤为唯一的ID并准备输出，以便将其粘贴到您的css文件中。

    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();

解析HTML文件以获取CSS文件的所有ID和类

5 个答案: