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

美工做的css样式里icon越来越多，手工来写icon名几乎不可能实现。所以就有了这个功能点：将css样式里的所有icon类列举出来以图形化的形式显示供配置人员选择！

搜索一圈，发现介绍从css里遍历东西的文章非常少。于是花了半天的时间自己来实现了！先看下一个选择图标的demo：

 
这里用的是easyui：一个comboxtree。
这里省略引用css和js库的代码（jquery和easyui库）。
html：


代码如下:

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

Javascript：


代码如下:

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();
});

有几个可能存在的问题：
1.大的项目样式可能巨多巨大，这种遍历显然不可能，需要指定到styleSheets。
2.如果各种大小的图标可能用easyui-combotree不太合理。
最后通过配置icon生成的菜单效果：

赞 (0)

相关推荐

  • js列举css中所有图标的实现代码

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

    美工做的css样式里icon越来越多,手工来写icon名几乎不可能实现.所以就有了这个功能点:将css样式里的所有icon类列举出来以图形化的形式显示供配置人员选择! 搜索一圈,发现介绍从css里遍历东西的文章非常少.于是花了半天的时间自己来实现了!先看下一个选择图标的demo:  这里用的是easyui:一个comboxtree. 这里省略引用css和js库的代码(jquery和easyui库). html: 复制代码 代码如下: <input id="cc" class=&q

  • js+div+css下拉导航菜单完整代码分享

    js+div+css下拉导航菜单完整代码分享

    效果预览:http://keleyi.com/keleyi/phtml/menu/1.htm 下拉菜单 js+div+css下拉导航菜单完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w

  • Vue.js在数组中插入重复数据的实现代码

    1.在默认的情况下,Vue.js默认不支持往数组中加入重复的数据.可以使用track-by="$index"来实现. 2.不使用track-by="$index"的数组插入,数组不支持重复数据的插入 2.1  JavaScript代码 <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type=&q

  • 如何用js控制css中的float的代码

    ie里面用styleFloat 其他用cssFloat 本文向大家简单介绍一下JS操作css的float属性的特殊写法,对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可. Js style float JS操作css的float属性的特殊写法 使用js操作css属性的写法是有一定的规律的: 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left,ob

  • 抓取并下载CSS中所有图片文件的php代码

    抓取并下载CSS中所有图片文件的php代码

    这篇文章的亮点是,正则式更加复杂鸟,╮(-_-)╭,再就是 Copy 函数的灰常强大的一个用法. > 话说刚才听 NsYta 说小邪的主题太白了,杯具.最近太忙,没有空,不然就自己搞一个新主题. 一. 抓取 CSS 中的图片: > 1. 首先做好准备工作: > 第一步,先把 CSS 原本的路径存到 $url 变量里,然后把 CSS 的内容保存在 abc.css 中. > 因为考虑到经常碰到多个 CSS 文件的状况,所以小邪没有直接填一个 CSS 路径. > 而是把几个 CSS

  • js删除select中重复项的实现代码

    js删除select中重复项的实现代码

    删除select中重复项 body{ text-align:center;} div{ width:400px; background:#f1f5fa; margin:auto; border:solid 1px #BFC9DB; padding:10px;} h4{ } a{text-align:right; display:block; font-size:12px;} /*定义全局函数$*/ function $(id){ return document.getElementById(id

  • js获取url中指定参数值的示例代码

    如下所示: 复制代码 代码如下: ///获取url中指定参数        // <param name="paras">参数名称</param>        ///        function request(paras) {            var url = location.href;            var paraString = url.substring(url.indexOf("?") + 1, url.l

  • 用javascript获得css中的属性值的代码

    .divs{ border: 1px #000000 solid; width:100px; height:100px } alert(document.getElementById("xx").currentStyle.borderWidth); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JS 去除Array中的null值示例代码

    复制代码 代码如下: function ClearNullArr(arr){ for(var i=0,len=arr.length;i<len;i++){ if(!arr[i]||arr[i]==''||arr[i] === undefined){ arr.splice(i,1); len--; i--; } } return arr; }

  • JS 控制CSS样式表

    下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .orig { display: none; } </style> 你想要改变把他的display属性由none改为inline. 解决办法: 在IE里: document.styleSheets[0].rules[0].style.display = "inline"; 在firef

随机推荐