javascript - 是否可以通过 JavaScript 从 HTML 节点中查找 CSS 规则？

Question

我想在 DOM 中获取一个元素，然后在我的 CSS 文件中查找哪些规则影响了它的外观。类似于 firebug 或 webkits inspector 所做的。有没有办法在 JavaScript 中执行此操作？

更新:

我应该提供一个约束条件和一个具体示例 - 我只对在基于 webkit 的浏览器中实现这一点感兴趣，因此跨浏览器的困难并不是什么大问题。我特别想要实现的是这个。假设我有一个样式表如下:

     div {
        background: #f0f0f0;
     }

     .example {
        padding: 10px;
     }

然后让我们说一些像这样的 html 代码:

  <div id="test" class="example">
     <hgroup>
        <h1>Test</h1>
        <h2>A sample file to play with.</h2>
     </hgroup>
     <ul class="sample">
        <li id="item_1">Item 1</li>
        <li id="item_2">Item 2</li>
     </ul>
  </div>

然后在 javascript 中我希望能够有一个函数可以从 CSS 中找到为对象设置样式的选择器:

get_selectors_for(document.getElementById('test'))
// should return:
// ['div','.example']

反向查询选择器知道我们只需要担心 webkit 而不是所有浏览器有多复杂？

Answer 1

这就是你想要的。仅限 WebKit。我通过查看 chromium web inspector 源代码发现了 getMatchedCSSRules。

  function getAppliedSelectors(node) {
    var selectors = [];
    var rules = node.ownerDocument.defaultView.getMatchedCSSRules(node, '');

    var i = rules.length;
    while (i--) {
      selectors.push(rules[i].selectorText);
    }
    return selectors;
  }