Javascript 确定对元素应用了哪些CSS选择器

是否有方法确定选择器当前是否已应用于给定元素

我知道可以迭代所有CSS选择器，并测试每个选择器是否适用。但我不确定Firebug和其他检查员是否是这样做的

编辑：

---

我需要一种使用JS动态执行的方法。

在Firebug中，您可以查看。对于任何给定的DOM元素，它都会显示应用的CSS样式（甚至是通过JavaScript应用的样式）。它还描述了被覆盖的样式。从文档中：

计算侧面板显示由用户代理计算的所有CSS样式值，同时解释HTML面板内所选节点的给定CSS信息

---

您可以使用和检查元素实例是否与选择器匹配：

当然，这只适用于支持上述方法的现代浏览器

---

或者，您可以使用：

---

使用getComputedStyle（）怎么样

---

但是，有了JS，我该怎么做呢？问题是如何“用JS动态地”做到这一点。这不是一个JavaScript解决方案。@Joetje50，如果你看一下，你已经注意到关于JS的要求是在发布这个答案之后才添加的。我很清楚这不是JS解决方案，谢谢。@zeantsoi好的，对不起，我不知道。顺便说一句，我不是那个投票否决你的人。@Joetje50，我从没想过你是。FWIW，不管怎么说，否决票不会引起我的反应。控制台和javascript是两件不同的事情，不能保证你可以用javascript做与控制台在浏览器环境中做的相同的事情。adeneo，我认为Firebug用DOM API做类似的检查。也许可以标记“我需要一种用JS动态完成的方法。”通过编辑，使人们不再对原始答案（对原始问题有好处）投否决票？@Adilson您想通过javascript在给定元素上应用css吗？是的，应该通过javascript完成。我最初用#JavaScript标记了这个问题。你也可以使用

元素。匹配（选择器）

：。@FelixKling，很高兴知道。特定于浏览器的前缀使代码有点笨拙，但它可能比我在这里写的更好，因为它似乎具有相同级别的浏览器支持。这是我最初想到的解决方案。迭代document.styleSheets，并针对每个cssRule测试（如果它与我的elmeent匹配）。但是，即使如此，还是有必要检查CSS规则的优先级。我稍后会检查Firebug源代码，看看他们是否使用了其他方法。无论如何，谢谢你@adilsondalmeidajr，计算选择器的特殊性并不是那么困难，但是您确实需要能够解析选择器。这将返回样式规则，而不是选择器。

function elementMatchesSelector(element, selector) {
    return Array.prototype.indexOf.call(document.querySelectorAll(selector), element) > -1;
}

function elementMatchesSelector(element, selector) {
    var fn;
    if (!element) {
        return false;
    }
    fn = element.matches || element.mozMatchesSelector || element.msMatchesSelector || element.webkitMatchesSelector;
    if (fn) {
        return fn.call(element, selector);
    }
    return false;
}