如何獲得給定DOM元素的所有定義的CSS選擇器？

Question

如何使用jQuery獲取給定DOM元素的所有DEFINED CSS選擇器？

定義的意思是指應用於document的任何樣式表中使用的所有CSS選擇器。

從某種意義上說，這與FireBug實現的功能類似，其中顯示了所選DOM元素的所有應用CSS選擇器。

任何幫助表示讚賞。

Answer 1

從這個answer你可能可以通過循環瀏覽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。不知道這將適用於所有情況的效果如何，但可能需要考慮是否符合您的需求。

更新一個稍微更完整example ...

$(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; 
} 

Answer 2

我覺得這兩個功能並不相似。此外，我認爲jQuery和瀏覽器都不會保留通過javascript代碼或樣式表文件使用的選擇器的跟蹤;選擇器用於引用一個或多個DOM元素，最終將樣式應用於它們。

所以，它保留的是樣式，而不是使用過的選擇器。

希望這會有所幫助。