Javascript kullanarak bilinen CSS sınıflarını listeleme

Question

Belirli bir belgeyle birlikte verilen stil sayfalarında tanımlanan sınıf adlarını toplamanın iyi bir yolunu bulmaya çalışıyorum. Ben document.StyleSheetList hakkında biliyorum ama ayrıştırmak kolay olurdu gibi görünmüyor.

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

Ben ["my_class", "second_class"] gibi bir dizi ayıklamak olabilir: Ne aradığım gibi bir stil belge için bir şey gibi olduğunu. Bu açıkça, tam yüklü bir dom ve stil sayfalarının olumlu senaryosunu üstlenir.

Şimdiye kadar böyle bir şey yapmak için iyi bir yol bulmak için her yere baktım ve şimdiye kadar çok az ilerleme kaydettim. Bunu nasıl çekeceğine dair bir fikri olan var mı? Teşekkürler!

Answer 1

Bu, stil sayfalarında tanımlanan tüm kuralları gösterecektir.

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

şey olsa da, .. ne olursa olsun sınıf veya etiket veya id ya da her türlü olmanın tüm kuralları içerir olmasıdır

Sen sigara sınıf için ne olmasını istediğinizi daha ayrıntılı olarak açıklamak gerekir

kurallar (veya kombine kurallar)

Answer 2

Ne .other_something .something

hakkında?

Mevcut bir classNames havuzu ister misiniz? Ya da seçici bir havuz?

Her neyse, document.styleSheets [i] .cssRules ile yinelemeyi denediniz mi? Bu size seçici metin verir. Bazı regexp kungfu ile ayrıştırma daha kolay olmalıdır ...

Crossbrowser olmak için ihtiyacınız var mı?

Answer 3

Bunu jQuery ile yapabilirsiniz. Örnek jQuery web üzerinden

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

Kontrol olacaktır: http://api.jquery.com/all-selector/

Answer 4

Sen document.styleSheets ile yolda olduğumuzu (https://developer.mozilla.org/en/DOM/document.styleSheets)

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

Tüm sınıf selectorTexts dosyalarını Firefox + Firebug'da konsola vermek için hızlı ve kirli bir yöntem.

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

Bu burada gerçekten bir yeniden düzenleme sürecinin bir parçası olarak haricinde yapmak istediğim şey muhtemelen değil, ama ne istediğini yapması gerektiğini bir işlevdir:

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