css_javascript 기술의 모든 아이콘을 나열하는 js 구현 코드

아티스트가 만든 CSS 스타일에는 아이콘이 점점 많아지고, 아이콘 이름을 수동으로 작성하는 것은 거의 불가능합니다. 따라서 다음과 같은 기능 포인트가 있습니다. 모든 아이콘 클래스를 CSS 스타일로 나열하고 구성 담당자가 선택할 수 있도록 그래픽으로 표시합니다!

검색해 보니 CSS에서 순회하는 것을 소개하는 글이 거의 없는 것을 발견했습니다. 그래서 제가 직접 구현하는데 반나절이 걸렸습니다! 아이콘 선택에 대한 다음 데모를 살펴보겠습니다.

Easyui는 여기서 콤보 트리로 사용됩니다.
여기서는 CSS 및 js 라이브러리(jquery 및 easyui 라이브러리)를 참조하는 코드를 생략합니다.
html:

코드 복사 코드는 다음과 같습니다.

<입력 ID ="cc " class="easyui-combotree" style="width:200px;">

Javascript:

코드 복사 코드는 다음과 같습니다.

function getstyle() {
for (var i = 0; i < document.styleSheets.length; i ) {
var 규칙;
if (document.styleSheets[i].cssRules) {
rules = document.styleSheets[i].cssRules;
}
else {
rules = 문서 .styleSheets[i].rules;
}
for (var j = 0; j < rule.length; j ) {
if (rules[j].selectorText.substr(0, 5) == ".icon" )
$('#cc').combotree('tree').tree('append', {
data: [{
id: rule[j].selectorText .substr(1),
텍스트: 규칙[j].selectorText.substr(1),
iconCls: 규칙[j].selectorText.substr(1)
}]
});
}
}
}
$(function () {
getstyle();
})

몇 가지 문제가 발생할 수 있습니다.
1. 대규모 프로젝트의 스타일은 엄청날 수 있습니다. 이러한 종류의 순회는 분명히 불가능하며 styleSheets에 할당해야 합니다.
2. 다양한 크기의 아이콘이 있는 경우 easyui-combotree를 사용하는 것이 합리적이지 않을 수 있습니다.
마지막으로 아이콘 구성을 통해 생성된 메뉴 효과: