Javascript를 사용하여 알려진 CSS 클래스 나열하기

Question

주어진 문서에 포함 된 스타일 시트에 정의 된 클래스 이름을 수집하는 좋은 방법을 찾으려고합니다. 나는 document.StyleSheetList에 대해 알고 있지만 파싱하기 쉽지 않은 것처럼 보입니다.

.my_class { 
    background: #fff000; 
} 
.second_class { 
    color: #000000; 
} 

내가 ["my_class", "second_class"] 같은 배열을 추출 할 수있다 : 나는 무엇을 찾고 있어요 같은 스타일 시트 문서에 대한 뭔가 같은 것입니다. 이것은 완전히로드 된 DOM 및 스타일 시트의 유리한 시나리오를 가정합니다.

나는 이런 식으로하고 지금까지 아무 것도 할 수없는 좋은 방법을 찾기 위해 거의 아무런 진전을 이루지 못했습니다. 이 문제를 해결하는 방법에 대해 알고있는 사람이 있습니까? 감사!

Answer 1

그러면 스타일 시트에 정의 된 모든 규칙이 표시됩니다.

var allRules = []; 
var sSheetList = document.styleSheets; 
for (var sSheet = 0; sSheet < sSheetList.length; sSheet++) 
{ 
    var ruleList = document.styleSheets[sSheet].cssRules; 
    for (var rule = 0; rule < ruleList.length; rule ++) 
    { 
     allRules.push(ruleList[rule].selectorText); 
    } 
} 

건,하지만 .. 관계없이 클래스 또는 태그 또는 ID 또는 어떤 존재의 모든 규칙을 포함하고 있다는 점이다

당신은 비 클래스 일이 원하는 것을 더 자세히 설명 할 필요가

규칙 (또는 결합 규칙)

Answer 2

무엇 .other_something .something

어떻습니까?

존재하는 classNames의 풀을 원합니 까? 아니면 선택 자의 풀?

어쨌든 document.styleSheets [i] .cssRules를 반복 해 보았습니까? 선택자 텍스트를 제공합니다. 일부 정규식 쿵푸로 구문 분석하는 것이 더 쉬워야합니다 ...

크로스 브라우저가 필요합니까?

Answer 3

jQuery와 함께 사용할 수 있습니다. 예를 jQuery를 웹 사이트 밖으로

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     var allobjects = $("*") 
    }); 
</script> 

확인 될 것이다 : http://api.jquery.com/all-selector/

Answer 4

당신은 document.styleSheets으로 궤도에 있었다 (https://developer.mozilla.org/en/DOM/document.styleSheets)

https://developer.mozilla.org/en/DOM/stylesheet.cssRules

Firefox + Firebug의 콘솔에 모든 class selectorTexts를 출력하는 빠르고 쉬운 방법이 있습니다.

var currentSheet = null; 
    var i = 0; 
    var j = 0; 
    var ruleKey = null; 

    //loop through styleSheet(s) 
    for(i = 0; i<document.styleSheets.length; i++){ 
     currentSheet = document.styleSheets[i]; 

     ///loop through css Rules 
     for(j = 0; j< currentSheet.cssRules.length; j++){ 

      //log selectorText to the console (what you're looking for) 
      console.log(currentSheet.cssRules[j].selectorText); 

      //uncomment to output all of the cssRule contents 
      /*for(var ruleKey in currentSheet.cssRules[j]){ 
       console.log(ruleKey +': ' + currentSheet.cssRules[j][ruleKey ]); 
      }*/ 
     } 
    } 

Answer 5

이 여기에 당신이 정말 리팩토링 프로세스의 일부를 제외하고 싶은 것이 아마 아니지만, 당신이 원하는 일을해야하는 기능입니다 :

,