确定已将哪些CSS选择器应用于元素

Question

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

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

修改 我需要一种方法来动态地使用JS。

Answer 1

您可以使用document.querySelectorAll和Array.prototype.indexOf检查选择器是否匹配了元素实例：

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

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

---

或者，您可以使用Element.matches：

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

Answer 2

在Firebug中，您可以查看Computed Side Panel。对于任何给定的DOM元素，它显示应用的CSS样式（甚至是通过JavaScript应用的那些样式）。它还描述了重写的样式。来自文档：

  

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

Answer 3

使用getComputedStyle（）怎么样？ MDN Link