1. 程式人生 > 其它 >遍歷CSS樣式表

遍歷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 = "";
							}
						}
					}
				}
			}
		});