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