宝哥软件园

js列出了css中所有图标的实现代码

编辑:宝哥软件园 来源:互联网 时间:2021-10-19

艺术家制作的css样式中图标越来越多,手工写图标名称几乎是不可能的。所以这里有一个功能点:以css样式列出所有图标类,并以图形方式显示,供配置者选择!搜索了一圈,发现很少有关于从css遍历东西的文章。所以我花了半天时间才自己意识到!先看下一个选择图标的演示:image

这是easyui:一个组合树。这里省略了引用css和js库(jquery和easyui库)的代码。Html:复制代码如下:输入id=' cc ' class=' easy ui-combobore ' style=' width :200 px;'Javascript:复制代码如下:函数getstyle(){ for(var I=0;I document . style sheets . length;i ) { var规则;if (document.styleSheets[i])。CSS rules){ rules=document . style sheets[I]。cssRules} else { rules=document . style sheets[I]。规则;} for(var j=0;j .规则.长度;j){ if(rules[j]. SelectOrText . substr(0,5)='。图标')$('#cc ')。组合树。tree('append ',{ data :[{ id : rules[j]. selectortext . substr(1),text : rules[j]. selectortext . substr(1),iconcl s 3360 rules[j]. selectortext . substr(1)}]});} } } $(function(){ getstyle();});有几个可能的问题:1。一个大的项目风格可能是巨大的,所以这种遍历显然是不可能的,需要分配给样式表。2.如果可以使用各种大小的图标,那么使用easyui-combotree是不合理的。最后配置图标生成的菜单效果:image

image

更多资讯
游戏推荐
更多+