jquery 使用JavaScript列出已知的CSS类

gcuhipw9  于 2023-06-22  发布在  jQuery
关注(0)|答案(5)|浏览(134)

我试图找到一种好的方法来收集给定文档中包含的样式表中定义的类名。我知道document.StyleSheetList,但它似乎不容易解析。我正在寻找的东西是这样的,对于一个样式表文档,例如:

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

我可以提取像["my_class", "second_class"]这样的数组。这显然假定了一个完全加载的dom和样式表的有利场景。
我一直在到处寻找一个好方法来做这样的事情,到目前为止,几乎没有进展。有没有人知道怎么把这件事搞定?谢谢!

kupeojn6

kupeojn61#

这将显示样式表中定义的所有规则。

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

但是,它包含了所有的规则,不管是class、tag、id还是其他什么。
您需要更详细地解释您希望非类规则(* 或组合规则 *)发生什么

oxcyiej7

oxcyiej72#

您正在使用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 ]);
            }*/
        }
    }
3vpjnl9f

3vpjnl9f3#

这可能不是你真正想做的事情,除非是作为重构过程的一部分,但这里有一个函数应该做你想做的事情:

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, making sure a selectorText exists (will throw errors otherwise on Media Queries)
                    return (rule.selectorText && rule.selectorText.match(/\.[\w\-]+/g)) || [];
                })
            );
        })
    ).filter(function(name) {
        // Reduce the list of classNames to a unique list
        return !classes[name] && (classes[name] = true);
    });
}
hof1towb

hof1towb4#

什么事
.something .other_something?
是否需要已存在的类名池?还是一个选择器池?
不管怎样,你有没有尝试过遍历document.styleSheets [i].cssRules?它提供选择器文本。用一些regexp kungfu解析应该更容易。。
你需要它是跨浏览器吗?

kuarbcqp

kuarbcqp5#

你可以用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/

相关问题