Liệt kê các lớp CSS đã biết bằng cách sử dụng Javascript

Question

Tôi đang cố gắng tìm một cách hay để thu thập tên của các lớp được định nghĩa trong các bảng định kiểu đi kèm với một tài liệu đã cho. Tôi biết về document.StyleSheetList nhưng có vẻ như không dễ để phân tích cú pháp. Những gì tôi đang tìm kiếm là một cái gì đó giống như, đối với tài liệu biểu định kiểu như:

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

Tôi có thể trích xuất một mảng như ["my_class", "second_class"]. Điều này rõ ràng giả định kịch bản thuận lợi của một dom và bảng định kiểu được nạp đầy đủ.

Tôi đã tìm kiếm ở khắp mọi nơi một cách tốt để làm điều gì đó như thế này và cho đến nay, đã có ít tiến bộ. Có ai có bất kỳ ý tưởng về làm thế nào để kéo này đi? Cảm ơn!

Answer 1

Điều này sẽ hiển thị tất cả các quy tắc được xác định trong biểu định kiểu.

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

Điều, tuy nhiên, là nó bao gồm tất cả quy tắc bất kể là lớp hoặc thẻ hoặc id hoặc bất cứ điều gì ..

Bạn sẽ cần phải giải thích chi tiết hơn những gì bạn muốn xảy ra cho những người không lớp quy tắc (hay quy tắc kết hợp)

Answer 2

Điều gì về

.something .other_something?

Bạn có muốn một nhóm lớp họcNên tồn tại? Hoặc một nhóm các bộ chọn?

Dù sao, bạn đã thử lặp lại thông qua document.styleSheets [i] .cssRules? Nó cung cấp cho bạn văn bản chọn. Phân tích cú pháp đó với một số regexp kungfu sẽ dễ dàng hơn ...

Bạn có cần nó để được crossbrowser?

Answer 3

Bạn có thể đi kèm với jQuery. Ví dụ sẽ là

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

Kiểm tra các trang web jQuery: http://api.jquery.com/all-selector/

Answer 4

Bạn đã đi đúng hướng với document.styleSheets (https://developer.mozilla.org/en/DOM/document.styleSheets)

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

Đây là phương pháp nhanh chóng và dơ bẩn để xuất tất cả các bộ chọn lớpTìm trong bàn điều khiển trong 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

đây có lẽ không phải là điều bạn bạn thực sự muốn được làm trừ như một phần của quá trình tái cấu trúc, nhưng đây là một chức năng mà nên làm những gì bạn muốn:

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