javascript - 确定将哪些 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;
}