js implementation code to list all icons in css_javascript skills

There are more and more icons in the CSS styles made by artists, and it is almost impossible to write icon names manually. So there is this function point: list all the icon classes in the css style and display them graphically for the configuration personnel to choose!

After searching around, I found that there are very few articles introducing traversing things from CSS. So it took me half a day to implement it myself! Let’s take a look at the next demo of selecting icons:

Easyui is used here: a combotree.
The code referencing css and js libraries (jquery and easyui libraries) is omitted here.
html:

Copy code The code is as follows:

Javascript:

Copy code The code is as follows:

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)
}]
});
}
}
}
$(function () {
getstyle();
});

There are several possible problems:
1. The styles of large projects may be huge. This kind of traversal is obviously impossible and needs to be assigned to styleSheets.
2. If there are icons of various sizes, it may not be reasonable to use easyui-combotree.
Finally the menu effect generated by configuring the icon: