JavaScript：检查css规则是否应用于元素

有没有办法确定css规则（字符串）是否应用于页面上的特定元素？例如：

HTML:

JS:

[编辑] WebKit/Blink中曾经有一个特殊函数，它返回元素的所有匹配规则-

窗口。getMatchedCSSRules（节点）

，但它已被弃用，不再工作

有没有比遍历所有选择器并检查它们是否与元素匹配更好的方法？此外，这种方法仍然不允许您轻松检查：悬停状态等。

您可以使用它查找与规则匹配的所有元素，然后检查结果是否包含所需的元素：

函数已应用（规则、元素）{
var元素=document.querySelectorAll（规则），i；
对于（i=0；ili”，document.getElementById（“item1”））；//真的
log（isRuleApplied（“.list>li”，document.getElementById（“item2”））；//错误

与此匹配


但不是这个

您可以使用

元素。匹配

|

元素。匹配选择器

调整（用于跨浏览器支持）：

---

您可以使用

document.querySelectorAll（rule）

获取与选择器匹配的所有元素，然后检查元素是否在其中：

function isRuleApplied(r, i) {
    var all = document.querySelectorAll(rule);
    for (var j = 0; j < all.length; j++) {
        if (all[j] == i) {
            return true;
        }
    }
    return false;
}

功能已应用（r，i）{
var all=document.queryselectoral（规则）；
对于（var j=0；j

哈哈，不错！但很明显，我的问题是，我不知道该怎么做，甚至不知道这是否可能。我不确定这是否是你想要的方式。可以检查元素是否与选择器匹配，也可以使用js获取应用的样式。但是，您需要解析css，以确定css文件中设置的样式是否与应用于元素的样式匹配。否则，您将在js中提供选择器和规则。您将有效地测试js功能，而不是cssapplication@susheel，不幸的是，该函数不再受支持（我更新了问题）@YemSalat我们不是来为您编写所有代码的。如果您在某个地方遇到困难，我们可以帮助您，但请在来这里之前至少自己尝试一些事情并做一些研究。@DarkAshelin这正是我所做的，请参阅对原始问题的编辑。

Array.prototype.indexOf.call（document.queryselectoral（selector），element）！=-1

简而言之，除非你想娇惯IE6:P编辑：等等，否则IE6无论如何都没有QSA…：汉克斯！你认为有没有更好的方法来检查：hover/：active/等，然后检查是否应用了单个样式？有趣的是，

document.querySelectoryAll

似乎接受

：hover

和

：active

伪类（不是伪元素）。太好了！非常感谢！我宁愿使用本机代码，然后每次都循环使用所有选择器（尽管循环作为一种后备方法仍然足够好）

.list > li { color: red; }

var item = document.getElementById('item');
var rule = '.list > li';
isRuleApplied(rule, item);

function isRuleApplied(rule, item) {
    // ???
    // returns true if rule matches the item, false otherwise
}

  function isRuleApplied(element,selector) {

      if(typeof element.matches == 'function')
           return element.matches(selector);

      if(typeof element.matchesSelector == 'function')
           return element.matchesSelector(selector);

      var matches = (element.document || element.ownerDocument).querySelectorAll(selector);
      var i = 0;

      while (matches[i] && matches[i] !== element)
        i++;

     return matches[i] ? true : false;
}

function isRuleApplied(r, i) {
    var all = document.querySelectorAll(rule);
    for (var j = 0; j < all.length; j++) {
        if (all[j] == i) {
            return true;
        }
    }
    return false;
}