Question

注意：这不是要查找特定元素/节点的规则，而是要查找是否可以将规则组合应用于任何元素。

我想知道是否可以使用javascript确定是否在CSS中定义了类的组合。

例如，我想知道CSS中是否定义了“.some_class .small{some style}”组合。

请不要JQuery。

Answer 1

实际上你只能使用原生JS来做到这一点。 jQuery不支持处理CSS规则遍历的方法。首先，您必须遍历所有document.styleSheets，在每个工作表中，您必须遍历所有sheet.cssRules。每个CssRule都有一个名为selectorText的属性，您可以将其与规则文本进行比较。但是，您需要关注选择器路径中标识符的顺序。这是演示代码：

var rulesChecker = {   
  compactRuleText: function(text) {
                   return text.replace(/[.#][^ +~>]+/g,
                                  function(m){
                                      return m.split(/([.#][^.#]+)/).sort().join('');
                                  })
                              .replace(/(\s*?[>+~]\s*|\s+?(?=\s))/g, function(m){
                                       return m.trim();
                   });
  },
  ruleExistence : [],
  init : function(){
     var sheets = document.styleSheets;
     for(var i = 0; i < sheets.length; i++){
       var rules = sheets[i].cssRules || sheets[i].rules;    
       for(var j = 0; j < rules.length; j++){        
         var a = this.compactRuleText(rules[j].selectorText);
         this.ruleExistence[a] = true;
       }
     }
  },
  ruleExists : function(ruleText) {
     var key = this.compactRuleText(ruleText);
     return (key in this.ruleExistence);
  }
};

rulesChecker.init();
//your rule text, note about the extra spaces and how close the identifiers are ...
//this in fact should match the rule in the CSS code (which is normally written)
var ruleText = ".f+.a.b#e >          .d        .k";
//ruleText = ".c";
alert(rulesChecker.ruleExists(ruleText));

Demo

Answer 2

如果您的文档中有这样的元素：

elt = document.querySelector('.some_class .small');

然后检查适用于

的规则

rules = window.getMatchedCSSRules(elt)

但是，我认为对getMatchedCSSRules的支持是不稳定的，而且它不是标准。

请参阅Is it possible to find CSS rules from an HTML node via JavaScript?，copy CSS styles that apply to an element，Is it possible to find CSS rules from an HTML node via JavaScript?，Javascript - How to get all matching classes and selector from css files for an element，Find all CSS rules that apply to an element等。

如果您确实只想找到特定选择器的定义，而不是应用于特定元素的规则，那么您必须像提到的评论者一样扫描样式表。但是，选择器可以用多种方式编写，因此不容易。例如，#foo.bar和.bar#foo是等效的。

检查css类组合是否与javascript一起存在

2 个答案:

Demo