遍歷CSS樣式表
阿新 • • 發佈:2021-07-02
記一次遍歷CSS樣式表,識別固定格式的樣式規則使之展現到頁面的實現思路
-
主要通過$(document.styleSheets)獲取頁面樣式表集,包括link標籤引用的外部檔案、style標籤中編寫的內部樣式表,
-
ownerNode:樣式表物件:
-
根據結構可以使用nodeName(LINK/STYLE)獲取外部樣式或者內部樣式
-
根據需求將需要的樣式展示到頁面。
$(function(){ //debugger // 元素物件,將遍歷到的樣式規則篩選出來並重新組合放入其中,方便後續append到頁面元素後 let html_icon = "", html_text = ""; // 獲取樣式styleSheets集合:包含頁面檔案中的所有style link標籤和style標籤都會包好在內,可以根據需要選擇需要的檔案做處理 let sheets = $(document.styleSheets); for (let thisSheet = 0; thisSheet < sheets.length; thisSheet++){ console.log(sheets[thisSheet]); let sheet = sheets[thisSheet]; // ownerNode為當前樣式表物件,ownerNode.nodeName: LINK 樣式表/STYLE 內聯樣式 if (sheet.ownerNode.nodeName === 'LINK' && sheet.ownerNode.href.indexOf("iconfont") > -1){ let n = 0; // rules為樣式表中的樣式規則 for (let idx = 0; idx < sheet.rules.length; idx++){ // 遍歷演示規則,根據需要進行邏輯處理 // 樣式裡面包含.fa樣式的,展示出來 if (sheet.rules[idx].cssText.indexOf('.fa-') > -1){ if (n===0){ html_icon += "<tr>"; html_text += "<tr>"; } n++; let len = Math.min(sheet.rules[idx].cssText.indexOf(":"), sheet.rules[idx].cssText.indexOf("{")) let cssText =sheet.rules[idx].cssText.substring(0, len); cssText = cssText.replaceAll(".", ""); html_icon += "<td class='text-center'><i class='fa "+ cssText +"'></i></td>"; html_text += "<td class='text-center'>"+cssText+"</td>"; if (n%10===0 || idx ===sheet.rules.length-1){ html_icon += "</tr>"; html_text += "</tr>"; $("#iconList").append(html_icon); $("#iconList").append(html_text); n = 0; html_icon = html_text = ""; } } } } } });