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

【问题标题】：Is it possible to find CSS rules from an HTML node via JavaScript?是否可以通过 JavaScript 从 HTML 节点中找到 CSS 规则？
【发布时间】：2011-05-27 19:28:35
【问题描述】：

我想在 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 中执行此操作感兴趣。没有那么多跨浏览器。
Find all CSS rules that apply to an element的可能重复

标签： javascript css dom

【解决方案1】：

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

【讨论】：

太棒了！这正是我想要的。
请注意，这仅适用于从与 HTML 相同的服务器发送的样式表中的规则。这是设计使然
@Jake 这就是为什么我得到null
你作为节点传入什么？
@Anthony 来自 dom 的一个节点。

【解决方案2】：

我成功使用的跨浏览器解决方案是http://www.brothercake.com/site/resources/scripts/cssutilities/

它非常强大和准确，比上面提到的仅限 webkit 的功能派生出更多的信息，并且它适用于所有样式（包括那些跨站点和不活动或已被覆盖的样式）。

【讨论】：

【解决方案3】：

有可能吗？绝对...它简单（尤其是混合了 IE 的跨浏览器），没那么多。如果你真的有兴趣这样做，check out the Firebug Lite CSS source here。至少这些方法得到了体面的注释，显示了每个方法正在获取什么信息。

....或者如果您只想在没有检查器的浏览器中进行检查，just use Firebug Lite。

【讨论】：

谢谢尼克，我真的只对在 webkit 中做这件事感兴趣。我应该更具体，但现在很高兴我把它放宽了一点！

【解决方案4】：

有一种可靠的获取方式，在这个blog post中提到：

function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView
            .getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

如果您使用的是 Firefox 和 Firebug，您可以尝试在 StackOverflow 中运行此代码，看看您会得到什么：

document.defaultView.getComputedStyle(document.getElementById("custom-header"),"")

使用 IE 和 Firebug Lite，您可以：

document.getElementById("custom-header").currentStyle

【讨论】：

谢谢，但我认为这会从 CSS 中查找计算样式。所以这段代码可以帮助我找出字体大小是 10px;。我不认为它一定是为了在 CSS 中找到特定的选择器是吗？
此代码将帮助您找到应用于元素的 css 规则。它们起源于哪里并不重要，重要的是它们被应用的事实。
这就是我想要的。 getComputedSyle 做getMatchedCSSRules 不能做的事情，因为当有跨域样式表时getMatchedCSSRules 返回null
我认为这是这个问题的解决方案：stackoverflow.com/questions/27957680

【解决方案5】：

嗯，这是一个古老的话题。很适合 Webkit 提供解决方案。正如建议的那样，我研究了 firebug-lite 并且......惊喜！对于每个节点，它会遍历每个样式表中的每个规则，检查选择器是否与我们的节点匹配。

【讨论】：