javascript - 从特定样式表中识别特定 HTML 页面中使用的所有 css ID 和类？

Question

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

我的任务是根据他们的页面组织类(class)，然后在他们前面加上页面 ID，使他们只点击该页面。

但是，手动找出页面中有哪些类和 ID，然后组织它们，这很乏味。

有没有办法将样式表中的所有类(仅在该页面上)“转储”到文件或其他内容中？

Answer 1

要获取正在使用的类/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);

http://jsfiddle.net/QLmNf/1/

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