Js lists the implementation code of all icons in css.

There are more and more icons in the css style made by the artist. It is almost impossible to manually write the icon name. So we have this function: list all icon classes in the css style and display them in a graphical form for the configuration staff to choose!

Search around and find very few articles about traversing things from css. So it took me half a day to implement it myself! First look at the demo of the next selection icon:

Easyui is used here: a comboxtree.
The code for referencing the css and js libraries (jquery and easyui libraries) is omitted here ).
Html:

Copy codeThe Code is as follows: <input id = "cc" class = "easyui-combotree" style = "width: 200px;">

Javascript:Copy codeThe Code is as follows: function getstyle (){
For (var I = 0; I <document. styleSheets. length; I ++ ){
Var rules;
If (document.stylesheetspolici}.css Rules ){
Rules = document.stylesheetspolici2.16.css Rules;
}
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. Large Project styles may be huge. This traversal is obviously impossible and styleSheets needs to be specified.
2. It may be inappropriate to use easyui-combotree for icons of various sizes.
Finally, configure the menu effect generated by the icon: