Javascript 如何获取给定DOM元素的所有已定义CSS选择器?
如何使用jQuery获取给定DOM元素的所有已定义CSS选择器 对于defined,我指的是应用于Javascript 如何获取给定DOM元素的所有已定义CSS选择器?,javascript,jquery,css-selectors,Javascript,Jquery,Css Selectors,如何使用jQuery获取给定DOM元素的所有已定义CSS选择器 对于defined,我指的是应用于文档的任何样式表中使用的所有CSS选择器 在某种程度上,这类似于FireBug实现的特性,其中显示了所选DOM元素的所有应用CSS选择器 非常感谢您的帮助。我认为这两个功能并不相似 此外,我认为jQuery和浏览器都不会通过javascript代码或样式表文件跟踪选择器的使用;选择器用于引用一个或多个DOM元素,以最终对其应用样式 因此,它保留的是样式,而不是使用的选择器 希望这能有所帮助。通过循环
文档的任何样式表中使用的所有CSS选择器
在某种程度上,这类似于FireBug实现的特性,其中显示了所选DOM元素的所有应用CSS选择器
非常感谢您的帮助。我认为这两个功能并不相似
此外,我认为jQuery和浏览器都不会通过javascript代码或样式表文件跟踪选择器的使用;选择器用于引用一个或多个DOM元素,以最终对其应用样式
因此,它保留的是样式,而不是使用的选择器
希望这能有所帮助。通过循环cssRules属性,您可能可以从中获得所需内容
var myElement = $("#content");
for (var x = 0; x < document.styleSheets.length; x++) {
var rules = document.styleSheets[x].cssRules;
for (var i = 0; i < rules.length; i++) {
if (myElement.is(rules[i].selectorText)) {
$("ul").append("<li>" + rules[i].selectorText + "</li>");
}
}
}
我们将得到以下匹配规则集:
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form,fieldset, input, textarea, p,
blockquote, th, td div
#content
div > div
举个例子。不确定这是否适用于所有场景,但如果它符合您的需要,可能需要考虑一下
更新了,略为完整
$(文档)。单击(函数(事件){
var规则=getAppliedCSRules($(event.target));
var$ul=$(“#规则”).empty();
$.each(规则、函数(){
$ul.追加(“”+此+“ ”);
});
event.preventDefault();
});
函数getAppliedCSRules($element){
var appliedRules=[];
对于(var x=0;x
这听起来更合理。。。但是,我不知道单独使用JS/jQuery是否可行。那么呢?它仍然相关吗?听起来你在试图找到元素的计算样式,而不是“定义的选择器”。@Matt Ball:我对计算样式不太感兴趣。我对获取选择器很感兴趣。这是否会像FireBug一样按照DOM中应用的优先级顺序返回appliedRules?这不会给您应用规则的优先级,只是样式表中的给定规则与您的元素匹配。如果您想找到元素的最终样式,可以使用getComputedStyle
@标记,您知道如何按css优先级排序选择器吗?我看到firebug lite按css优先级排序,但我不知道他们是如何做到的。+1用于简单、即时可用的实现。(这里的解决方案思路很清楚)
div
{
background-color:black;
}
#content{
height:50px;
width:50px;
}
div > div
{
border: solid 1px red;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form,fieldset, input, textarea, p,
blockquote, th, td div
#content
div > div
$(document).click(function(event) {
var rules = GetAppliedCssRules($(event.target));
var $ul = $("#rules").empty();
$.each(rules, function() {
$ul.append("<li>" + this + "</li>");
});
event.preventDefault();
});
function GetAppliedCssRules($element) {
var appliedRules = [];
for (var x = 0; x < document.styleSheets.length; x++) {
var rules = document.styleSheets[x].cssRules;
for (var i = 0; i < rules.length; i++) {
if ($element.is(rules[i].selectorText)) {
appliedRules.push(rules[i].selectorText);
}
}
}
return appliedRules;
}