Вывод списка известных CSS-классов с использованием Javascript

Question

Я пытаюсь найти хороший способ собрать имена классов, определенных в таблицах стилей, включенных в данный документ.Я знаю о document.StyleSheetList, но не похоже, что это будет легко разобрать.То, что я ищу, это что-то вроде документа таблицы стилей, например:

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

Я мог бы извлечь массив, например ["my_class", "second_class"].Это, очевидно, предполагает благоприятный сценарий полностью загруженного домена и таблиц стилей.

Я всюду искал хороший способ сделать что-то подобное, и пока что добился небольшого прогресса.У кого-нибудь есть идеи о том, как это осуществить?Спасибо!

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

Суть в том, что он включает в себя все правила, независимо от того, являются ли они классом, тегом, идентификатором или чем-то еще.

Вам нужно будет более подробно объяснить, что вы хотите сделать для правил, не относящихся к классу ( или комбинированных правил )

Answer 2

Вы были на пути с document.styleSheets (https://developer.mozilla.org/en/DOM/document.styleSheets)

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

Вот быстрый и грязный метод для вывода всех selectorTexts класса на консоль в 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 3

Это, вероятно, не то, что вы действительно хотите делать, кроме как часть процесса рефакторинга, но вот функция, которая должна делать то, что вы хотите:

function getClasses() {
    var classes = {};
    // Extract the stylesheets
    return Array.prototype.concat.apply([], Array.prototype.slice.call(document.styleSheets)
        .map(function (sheet) {
            if(null == sheet || null == sheet.cssRules) return;
            // 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);
    });
}

Answer 4

Вы можете сделать это с помощью 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>

Посетите веб-сайт jQuery: http://api.jquery.com/all-selector/

Answer 5

А как насчет

.something .other_something?

Хотите ли вы, чтобы существовал пул classNames?Или пул селекторов?

В любом случае, вы пробовали перебирать document.styleSheets [i] .cssRules?Это дает вам селектор текста.Разбор этого с некоторым регулярным выражением kungfu должно быть проще ...

Вам нужно, чтобы он был перекрестным?