Javascript 识别所有css ID'；在特定样式表的特定HTML页面中使用的类型和类？

我被分配了清理5000多行CSS的任务。在这个项目的开发过程中，我们基本上只是将类附加到这个庞大的CSS文件中

我的任务是根据类的页面组织类，然后将页面ID预先发送给它们，使它们只点击该页面

然而，让这变得单调乏味的是手动找出页面中的类和ID，然后组织它们

---

有没有一种方法可以将样式表中的所有类（仅在该页上）都“转储”到一个文件或其他东西中？

要获得正在使用的类/id数组，请循环文档中的每个元素并填充数组。显然这不是很有效，但考虑到手头的任务，我怀疑这是一个问题

var idArr = [];
var classArr = [];
[].forEach.call(document.querySelectorAll("*"), function(element){
    if (element.id && idArr.indexOf(element.id) == -1) {
        idArr.push(element.id);
    }
    if (element.className) {
        var tempClassArr = element.className.split(" ");
        for (var i = 0; i < tempClassArr.length; i++) {
            if (classArr.indexOf(tempClassArr[i]) == -1) {
                classArr.push(tempClassArr[i]);
            }
        }
    }
});
console.log(idArr);
console.log(classArr);

var-idArr=[]；
var classArr=[]；
[]forEach.call（document.queryselectoral（“*”），函数（元素）{
if（element.id&&idArr.indexOf（element.id）=-1）{
idArr.push（元素id）；
}
if（element.className）{
var tempClassArr=element.className.split（“”）；
对于（变量i=0；i

---

这将在页面上为您提供一个ID数组和一个类数组。然后需要将其与样式声明进行比较，以找到匹配的样式声明。当然，这不会删除使用这些id和类但实际上与页面上的任何元素都不匹配的声明，您可以使用@jordanforman建议的audits选项卡来解决这个问题。

我很确定有一个工具可以告诉您样式表的哪些部分不用于特定页面（意味着剩下的将被使用）但是我记不起名字了。生成一个页面中使用的类和id数组会很容易，但是使用它来确定使用了什么样式声明听起来很困难。不，只需要使用任何核心CSS的所有类和id。所有通用CSS都在我的jQueryMobile.CSS中，我不需要，只需要我显式声明的类在我的html页面中引用一个特定的css文件。我该怎么做@Kevinby你可以使用Chrome开发工具的

Audits

选项卡来查看哪些css规则是活动的，但在当前页面上没有被使用。也许你可以链接到该列表，并将其与@KevinB建议的结果进行比较？有一个Firefox插件，名为，我从未使用过它，但我听到其他人说它很有效。不过……如果可以使用“审核”选项卡中的结果，我不明白为什么您甚至需要这些数组。它将为您提供一个未使用的声明列表。如果您从工作表中删除这些声明，您将保留正在使用的声明。审核工具很好，但是，我希望它能告诉我在特定样式表的页面上使用了什么。