js列舉css中所有圖標的實現(xiàn)代碼
更新時間：2011年07月04日 23:31:24 作者：
最近在做一個通用的配置模塊。配置模塊中必然要對系統(tǒng)的菜單、功能模塊、權(quán)限資源等進行配置，為了更好的用戶體驗，圖標是必不可少的！
美工做的css樣式里icon越來越多，手工來寫icon名幾乎不可能實現(xiàn)。所以就有了這個功能點：將css樣式里的所有icon類列舉出來以圖形化的形式顯示供配置人員選擇！
搜索一圈，發(fā)現(xiàn)介紹從css里遍歷東西的文章非常少。于是花了半天的時間自己來實現(xiàn)了！先看下一個選擇圖標的demo：
<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生成的菜單效果：
搜索一圈，發(fā)現(xiàn)介紹從css里遍歷東西的文章非常少。于是花了半天的時間自己來實現(xiàn)了！先看下一個選擇圖標的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生成的菜單效果：
相關(guān)文章
這篇文章主要介紹了javascript實現(xiàn)小型區(qū)塊鏈功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了JS瀏覽器事件模型，對時間模型感興趣的同學，可以參考下2021-05-05
今天小編就為大家分享一篇layer.open 按鈕的點擊事件關(guān)閉方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了JS添加或刪除HTML dom元素的方法,結(jié)合實例形式分析了javascript針對HTML DOM元素節(jié)點的創(chuàng)建、追加、刪除等相關(guān)操作技巧與注意事項,需要的朋友可以參考下2019-03-03
下面小編就為大家?guī)硪黄狫S獲取屏幕高度的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了JS實現(xiàn)字符串翻轉(zhuǎn)的方法,結(jié)合實例形式分析了javascript字符串使用reverse方法、字符串遍歷方法以及針對輸入字符串的遍歷、逆序輸出等方法實現(xiàn)字符串反轉(zhuǎn)相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
本篇文章主要介紹了Webpack如何引入bootstrap的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了開源一個微信小程序儀表盤組件過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
可能有些同學看到這個標題就會產(chǎn)生疑惑，為什么我們要判斷JavaScript中的兩個變量是否相等，JavaScript不是已經(jīng)提供了雙等號“==”以及三等號“===”給我們使用了嗎2019-12-12
剛接觸微信小程序，對里面的語法和屬性還不怎么了解，最近正在努力學習中，下面這篇文章主要給大家介紹了微信小程序中多個頁面?zhèn)鲄⑼ㄐ诺南嚓P(guān)資料，是最近學習的一個內(nèi)容總結(jié)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05