Listado de clases CSS conocidas usando Javascript

Question

Estoy tratando de encontrar una buena forma de recopilar los nombres de las clases definidas en las hojas de estilo incluidas con un documento dado. Sé de document.StyleSheetList pero no parece que sea fácil de analizar. Lo que estoy buscando es algo así como, para un documento de hoja de estilo, tales como:

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

pude extraer una matriz como ["my_class", "second_class"]. Obviamente, esto supone el escenario favorable de un dom completamente cargado y hojas de estilo.

He estado buscando por todas partes una buena forma de hacer algo como esto y, hasta ahora, he progresado poco. ¿Alguien tiene alguna idea sobre cómo llevarlo a cabo? ¡Gracias!

Answer 1

Esto mostrará todas las reglas definidas en las hojas de estilo.

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, sin embargo, es que incluye todas las reglas de clase, independientemente de ser o etiqueta o la identificación o lo que sea ..

Tendrá que explicar con más detalle lo que quieres que ocurra por falta de clases normas o reglas (combinados)

Answer 2

¿Qué hay de

.something .other_something?

¿Quieres un grupo de clases que existan? ¿O un grupo de selectores?

De todos modos, ¿has intentado iterar a través de document.styleSheets [i] .cssRules? Te da el texto del selector. Analizar eso con algunos kungfu regexp debería ser más fácil ...

¿Lo necesitas para ser crossbrowser?

Answer 3

Puede realizar esto con jQuery. Un ejemplo sería

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

consultar el sitio web de jQuery: http://api.jquery.com/all-selector/

Answer 4

Usted estaba en la pista con document.styleSheets (https://developer.mozilla.org/en/DOM/document.styleSheets)

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

Aquí es un método rápido y sucio para dar salida a todos los selectorTexts clase a la consola en 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

Esto probablemente no es algo que realmente quiero hacer, excepto como parte de un proceso de refactorización, pero aquí es una función que debe hacer lo que quiera:

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