css_javascript スキルのすべてのアイコンをリストするための js 実装コード

アーティストが作成した CSS スタイルのアイコンが増えており、アイコン名を手動で記述することはほとんど不可能です。そこで、この機能ポイントがあります。CSS スタイルですべてのアイコン クラスをリストし、構成担当者が選択できるようにグラフィカルに表示します。

調べてみると、CSS からトラバースすることを紹介している記事が非常に少ないことが分かりました。ということで、自分で実装するのに半日かかりました！アイコンを選択する次のデモを見てみましょう:

ここでは Easyui が使用されています: コンボツリー。
css および js ライブラリ (jquery および easyui ライブラリ) を参照するコードはここでは省略されています。
html:

コードをコピー コードは次のとおりです:

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. 大規模なプロジェクトのスタイルは巨大である可能性があるため、この種の走査は明らかに不可能であり、スタイルシートに割り当てる必要があります。
2. さまざまなサイズのアイコンがある場合、easyui-combotree を使用するのは合理的ではない可能性があります。
最後に、アイコンの設定によって生成されるメニュー効果: