Elenco delle classi CSS conosciute che utilizzano Javascript

Question

Sto cercando di trovare un buon modo per raccogliere i nomi delle classi definite nei fogli di stile inclusi in un determinato documento. So di document.StyleSheetList ma non sembra facile da analizzare. Quello che sto cercando è qualcosa di simile, per un documento foglio di stile come ad esempio:

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

ho potuto estrarre una matrice come ["my_class", "second_class"]. Ciò ovviamente presuppone lo scenario favorevole di dom e fogli di stile completamente caricati.

Ho cercato ovunque un buon modo per fare qualcosa del genere e finora ho fatto pochi progressi. Qualcuno ha qualche idea su come tirarlo fuori? Grazie!

Answer 1

Questo mostrerà tutte le regole definite nei fogli di stile.

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); 
    } 
} 

La cosa, però, è che include tutte le regole a prescindere di essere classe o tag o ID o qualsiasi altra cosa ..

Avrete bisogno di spiegare più in dettaglio ciò che si desidera che accada per non classe regole (o regole combinate)

Answer 2

Che dire

.something .other_something?

Vuoi un pool di nomi di classe esistenti? O un pool di selettori?

In ogni caso, hai provato a scorrere iter document.styleSheets [i] .cssRules? Ti dà il testo del selettore. Analizzare quello con qualche kungfu di regexp dovrebbe essere più facile ...

Ti serve essere crossbrowser?

Answer 3

Puoi farlo con jQuery. Esempio sarebbe

<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> 

Controllate il sito web di jQuery: http://api.jquery.com/all-selector/

Answer 4

Eri in pista con document.styleSheets (https://developer.mozilla.org/en/DOM/document.styleSheets)

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

Ecco un metodo rapido e sporco per generare tutti i selettori di classeTexts sulla console in Firefox + Firebug.

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

questo non è probabilmente qualcosa che si vuole veramente fare se non come parte di un processo di refactoring, ma qui è una funzione che dovrebbe fare quello che vuoi:

function getClasses() { 
    var classes = {}; 
    // Extract the stylesheets 
    return Array.prototype.concat.apply([], Array.prototype.slice.call(document.styleSheets) 
     .map(function (sheet) { 
      // Extract the rules 
      return Array.prototype.concat.apply([], Array.prototype.slice.call(sheet.cssRules) 
       .map(function(rule) { 
        // Grab a list of classNames from each selector 
        return rule.selectorText.match(/\.[\w\-]+/g) || []; 
       }) 
      ); 
     }) 
    ).filter(function(name) { 
     // Reduce the list of classNames to a unique list 
     return !classes[name] && (classes[name] = true); 
    }); 
}