[英]Is it possible to find CSS rules from an HTML node via JavaScript?
我想在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 web检查器源找到了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;
}
我已经取得了巨大成功的跨浏览器解决方案是http://www.brothercake.com/site/resources/scripts/cssutilities/
它非常强大和准确,比上面提到的仅限webkit的函数获得了更多的信息,它适用于所有样式(包括那些跨站点且不活动或已被覆盖的样式)。
可能吗? 绝对......它很简单 (特别是混合使用IE的跨浏览器),而不是那么多。 如果您真的对此感兴趣, 请在此处查看Firebug Lite CSS源代码 。 至少这些方法得到了很好的评论,显示了每个方法取得的信息。
....或者如果您只想在没有检查员的浏览器中进行检查, 只需使用Firebug Lite即可 。
在这篇博文中提到了一种可靠的获取方法:
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
嗯,这是一个古老的主题。 适合Webkit提供解决方案。 正如所建议的那样,我已经研究过firebug-lite和......惊喜! 对于每个节点,它遍历每个样式表中的每个规则,检查选择器是否匹配我们的节点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.