是否從特定樣式表中識別特定HTML頁面中使用的所有CSS ID和類？

Question

我被分配了清理超過5,000行CSS的任務。 在該項目的開發過程中，我們基本上只是將類添加到了這個龐大的CSS文件中。

我的任務是根據他們的頁面組織課程，然后在他們之前添加頁面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建議的audits選項卡解決該問題。