JavaScript：檢查css規則是否應用於元素

Question

有沒有辦法找出css規則（字符串）是否應用於頁面上的特定元素？ 例如：

HTML：

<ul class="list">
  <li>List item</li>
  <li id="item">I want to check this element</li>
</ul>

CSS：

.list > li { color: red; }

JS：

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
}

[編輯]在WebKit / Blink中使用了一個特殊的函數，它返回了元素的所有匹配規則 - window.getMatchedCSSRules(node) - 但它已被棄用，不再有效。

有沒有比循環遍歷所有選擇器並檢查它們是否與元素匹配更好的方法？ 此外，這種方式仍然不允許您檢查：輕松懸停狀態等。

Answer 1

您可以使用Element.matches || Element.matchesSelector

使用Polyfill調整MDN參考 （用於跨瀏覽器支持）：

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

Answer 2

您可以使用document.querySelectorAll查找與規則匹配的所有元素，然后檢查結果是否包含所需元素：

 function isRuleApplied(rule, element) { var elements = document.querySelectorAll(rule), i; for (i = 0; i < elements.length; i++) { if (elements[i] === element) { return true; } } return false; } console.log(isRuleApplied(".list > li", document.getElementById("item1"))); // true console.log(isRuleApplied(".list > li", document.getElementById("item2"))); // false 

 <ul class="list"> <li id="item1">Match this</li> </ul> <ul class="test"> <li id="item2">But not this</li> </ul> 

Answer 3

您可以使用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;
}