使用Javascript列出已知的CSS类

我正在尝试找到一种很好的方法来收集给定文档中包含的样式表中定义的类的名称。 我知道document.StyleSheetList但它似乎并不容易解析。 我正在寻找的是类似于样式表文档，例如：

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

我可以提取像["my_class", "second_class"]这样的数组。 这显然假设了满载的dom和样式表的有利场景。

我一直在寻找一个好的方法来做这样的事情到目前为止，没有取得什么进展。 有没有人知道如何解决这个问题？ 谢谢！

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

但事情是，它包括所有规则，无论是类，标签，id还是其他什么。

您需要更详细地解释您希望非类规则（ 或组合规则 ）发生什么

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 

Answer 3

这可能不是你真正想要做的事情，除非作为重构过程的一部分，但这里有一个应该做你想要的function：

 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

关于什么

.something .other_something？

你想要一个存在的classNames池吗？ 还是一群选择者？

无论如何，您是否尝试过遍历document.styleSheets [i] .cssRules？ 它为您提供选择器文本。 解析一些regexp功夫应该更容易……

你需要它作为crossbrowser吗？

Answer 5

你可以用jQuery来实现这一点。 例子就是

查看jQuery网站： http ： //api.jquery.com/all-selector/