遍历CSS样式表

记一次遍历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 = "";
							}
						}
					}
				}
			}
		});