JavaScript遍历CSS样式表提取图标类名并生成UI组件

作者：像素猫

时间：2026-10-26

本文介绍如何通过JavaScript遍历document.styleSheets，提取CSS中所有以.icon开头的类名，并利用EasyUI的combotree组件将这些图标类名以图形化列表的形式动态展示，供配置人员选择。文中包含完整的HTML与JS实现代码及潜在性能问题的分析。

文章目录

CSS图标遍历提取需求背景

随着前端开发中美工制作的CSS样式日益丰富，图标（icon）数量激增，人工手动编写每个图标的名称已变得几乎不可行。因此，开发一项功能：自动列举CSS样式中所有的图标类名，并以图形化的方式展示出来，供配置人员进行直观选择，显得尤为重要。

经过搜索发现，网络上关于从CSS中遍历提取信息的文章非常稀少。为此，笔者花费了半天的时间自行实现了该功能。以下是一个选择图标的演示案例：

基于EasyUI的图标选择组件实现

本示例使用了EasyUI框架中的comboxtree组件。此处省略了引用CSS和JS库的代码（包括jquery和easyui库）。 HTML结构如下：

getstyle();

代码如下:

 
<input id="cc" class="easyui-combotree" style="width:200px;">

JavaScript实现逻辑：

});

代码如下:

 
JavaScript遍历CSS规则核心代码function getstyle() {
for (var i = 0; i < document.styleSheets.length; i++) {
var rules;
if (document.styleSheets[i].cssRules) {
rules = document.styleSheets[i].cssRules;
} 
} else {
rules = document.styleSheets[i].rules;
} 
for (var j = 0; j < rules.length; j++) {
if (rules[j].selectorText.substr(0, 5) == ".icon")
$('#cc').combotree('tree').tree('append', {
data: [{
id: rules[j].selectorText.substr(1),
text: rules[j].selectorText.substr(1),
iconCls: rules[j].selectorText.substr(1)
}] 
}); 
} 
} 
} 
}],
});
});