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

我想在DOM中获取一个元素，然后查找我的CSS文件中的哪些规则有助于其外观。与Firebug或Webkits检查器的操作类似。有没有办法用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而不是所有浏览器，反向查询选择器有多复杂？

最佳答案

这就是你想要的。仅WebKit。通过查看 Chrome 网检查器源，我发现了有关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;
  }