如何获取 HTML 文件中使用的 Css 类列表？答案

【问题标题】：How to get list of Css class use in the HTML file?如何获取 HTML 文件中使用的 Css 类列表？
【发布时间】：2011-09-24 10:38:08
【问题描述】：

我需要一个 html 文件中使用的类列表。有什么工具可以让我获取 HTML 文件中的类列表吗？

【问题讨论】：

您只需要类名列表还是值列表？
我需要在 HTML 中使用的类名，就像我应用于控件或任何其他容器的类一样。

标签： html css

【解决方案1】：

这应该可以工作，并且不需要 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(' '));

es6 版本

let used = new Set();
let elements = document.getElementsByTagName('*');
for (let { className = '' } of elements) {
    for (let name of className.split(' ')) {
        if (name) {
            used.add(name);
        }
    }
}
console.log(used.values());

更实用的方法

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);
}, []);

【讨论】：

不得不稍微更新一下——因为它失败了“elements[i].className.split(' ')”——不是一个函数。这是更新的代码 - jsfiddle.net/dqad4n90
已更新以修复 es6 解决方案。有对未定义变量的引用 seen.add(name)。它应该是used.add(name)。优雅的解决方案，非常好的东西。

【解决方案2】：

如果页面上有 jQuery，请运行以下代码：

var classArray = [];
$('*').each(function(){if(this.className!=""){classArray.push(this.className)}})

变量 classArray 将包含该 HTML 页面上指定的所有类。

【讨论】：

您的结果中会出现重复项。
标签名和 ID 在列表中

【解决方案3】：

纯 Javascript 代码将列出所有独特的类。

var lst=[];
document.querySelectorAll("[class]").forEach( (e)=>{  
e.getAttribute("class").split(" ").forEach( (cls)=>{if( cls.length>0 && lst.indexOf(cls)<0) lst.push(cls);}
);
 });
console.log(lst.sort());

【讨论】：

【解决方案4】：

看看 Dust Me Selectors。

这不是您要查找的内容，它显示了未使用的选择器列表。但是，我想您可以使用它提供的列表的倒数。

这里是链接：http://www.sitepoint.com/dustmeselectors/

【讨论】：

看起来是一个不错的扩展，但它只是在谈论对 FF3.5 的支持！我们现在是 Firefox “6.0”（4.0 有 2 个错误修复版本）。

【解决方案5】：

我知道这是一个老问题，但通过谷歌来到这里，所以我怀疑更多的人也可以到达这里。

使用 querySelectorAll 和 classList（这意味着浏览器支持可能是一个问题：IE10 for classList 和 IE8 for querySelectorAll）以及重复项的最短方法是：

var classes = 0, 
elements = document.querySelectorAll('*');

for (var i = 0; i < elements.length; i++) {
    classes = classes + elements[i].classList.length;        
}

I made a jsFiddle 带有 classList 的后备（它具有“最低”浏览器支持），如果您不使用 classList，它还会计算所有元素、所有类和所有带有类的元素。

虽然我没有添加唯一检测，但可能有一天会实现。

【讨论】：

谢谢！很适合最近的解决方案。普通的 JavaScript --> 不需要 jQuery。

【解决方案6】：

从 console 快速列出类（忽略 'ng-*' 角度类）

(global => {
    // get all elements
    const elements = document.getElementsByTagName('*');
    // add only unique classes
    const unique = (list, x) => {
        x != '' && list.indexOf(x) === -1 && x.indexOf('ng-') !== 0 && list.push(x);                    
        return list;
    };
    // trim
    const trim = (x) => x.trim();
    // add to variable
    global.allClasses = [].reduce.call(elements, (acc, e) => e.className.split(' ').map(trim).reduce(unique, acc), []).sort();
    console.log(window.allClasses);
})(window);

【讨论】：