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

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

看看Dust Me选择器

它并不完全是你想要的，它显示了一个未使用选择器的列表。但是，我想您可以使用它提供的列表的相反部分

---

下面是链接：

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

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

---

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

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

更实用的方法

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

---

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

使用querySelectorAll和classList（这意味着浏览器支持可能是一个问题：和）以及使用副本的最短方法是：

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

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

var类=0，
elements=document.querySelectorAll（'*'）；
对于（var i=0；i

如果不使用

classList

，classList（具有“最低”浏览器支持）的回退功能还可以统计所有元素、所有类以及包含类的所有元素

---

不过，我没有添加唯一的检测，可能有一天会用到。

快速从控制台列出类（忽略“ng-*”角度类）

（全局=>{
//获取所有元素
常量元素=document.getElementsByTagName（'*'）；
//仅添加唯一类
常量唯一=（列表，x）=>{
x！=''&&list.indexOf（x）==-1&&x.indexOf（'ng-'）！==0&&list.push（x）；
退货清单；
};
//修剪
常量trim=（x）=>x.trim（）；
//添加到变量
global.allClasses=[].reduce.call（elements，（acc，e）=>e.className.split（“”）.map（trim）.reduce（unique，acc），[]）.sort（）；
console.log（window.allClasses）；
})（窗口）纯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());

var lst=[]；
document.queryselectoral（“[class]”）。forEach（（e）=>{
e、 getAttribute（“class”）.split（“”）.forEach（（cls）=>{if（cls.length>0&&lst.indexOf（cls）您是否还需要类名或值的列表？我需要类名，它在HTML中使用，就像我应用于控件或任何其他容器的任何类一样。看起来是一个很好的扩展，但它只讨论FF3.5支持！我们现在使用的是Firefox“6.0”（4.0，有2个错误修复版本）。您的结果中会有重复项。列表中有标记名和ID。必须对其进行一点更新，因为它在“elements[i]中失败。className.split（“”）不是一个函数。以下是更新的代码-已更新以修复es6解决方案。已引用未定义的变量seen
seen.add（name）
。应该使用
。添加（名称）
。不过，这是一个优雅的解决方案，非常好的东西。谢谢！最近的解决方案很好。普通JavaScript-->不需要jQuery。
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());