如何使用jQuery获取给定DOM元素的所有已定义CSS选择器?
所谓“已定义”,是指应用于document
的任何样式表中使用的所有CSS选择器。
从某种意义上讲,这类似于FireBug实现的功能,在其中它显示了所选DOM元素的所有应用CSS选择器。
感谢任何帮助。
如何使用jQuery获取给定DOM元素的所有已定义CSS选择器?
所谓“已定义”,是指应用于document
的任何样式表中使用的所有CSS选择器。
从某种意义上讲,这类似于FireBug实现的功能,在其中它显示了所选DOM元素的所有应用CSS选择器。
感谢任何帮助。
根据这个答案,你可以通过循环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>");
}
}
}
给定以下dom:
<div>
<div id="content">
</div>
</div>
以及 CSS 规则:
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
这是一个关于jsfiddle的示例。不确定它是否适用于所有情况,但如果符合您的需求,可能值得一看。
更新:使用稍微更完整的示例...
$(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;
}
getComputedStyle
。 - Mark Coleman无法从'CSSStyleSheet'读取'cssRules'属性:无法访问规则
的错误。如何跳过外部CSS? - brauliobo$element.is
? - brauliobo我认为这两个功能并不相似。
此外,我认为无论是jQuery还是浏览器都没有跟踪通过JavaScript代码或样式表文件使用的选择器;选择器用于引用一个或多个DOM元素,最终将样式应用于它们。
因此,保存的是样式,而不是使用的选择器。
希望这可以帮助到您。