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

时间:2010-12-19 09:47:39

标签: javascript css dom

我想在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而不是所有浏览器?

5 个答案:

答案 0 :(得分:12)

这就是你想要的。仅限WebKit。我通过查看铬网络检查员来源了解了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;
  }

答案 1 :(得分:6)

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

它非常强大和准确,比上面提到的仅限webkit的函数获得了更多的信息,并且它适用于所有样式(包括那些跨站点且不活动或已被覆盖的样式)。

答案 2 :(得分:2)

有可能吗?绝对......它是简单(尤其是混合使用IE的跨浏览器),而不是那么多。如果您真的对此感兴趣,check out the Firebug Lite CSS source here。至少这些方法得到了很好的评论,显示了每个方法的信息。

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

答案 3 :(得分:1)

有一种可靠的获取方法,在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

答案 4 :(得分:1)

嗯,这是一个古老的主题。 适合Webkit提供解决方案。 正如所建议的那样,我已经研究过firebug-lite和......惊喜! 对于每个节点,它遍历每个样式表中的每个规则,检查选择器是否匹配我们的节点。