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

调整MDN reference with Polyfill（用于跨浏览器支持）：

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

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

3 个答案: