किसी दिए गए डॉम तत्व के लिए सभी परिभाषित सीएसएस चयनकर्ता कैसे प्राप्त करें?

Question

jQuery का उपयोग कर दिए गए डॉम एलिमेंट के लिए सभी निर्धारित सीएसएस चयनकर्ता कैसे प्राप्त करें?

परिभाषित के साथ मेरा मतलब है कि सभी सीएसएस चयनकर्ता जिनका उपयोग document पर लागू किसी भी स्टाइलशीट में किया जाता है।

एक तरह से, यह फ़ायरबग द्वारा लागू की गई सुविधा के समान है, जहां इसमें चयनित डॉम एलिमेंट के लिए सभी एप्लाइड सीएसएस चयनकर्ता दिखाए जाते हैं।

किसी भी मदद की सराहना की है।

Answer 1

इस answer से आप सीएसएसआरयूल्स संपत्ति के माध्यम से लूपिंग करके जो खोज रहे हैं उसे पाने में सक्षम हो सकते हैं।

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>"); 
     } 
    } 
} 

को देखते हुए निम्नलिखित डोम:

<div> 
    <div id="content"> 
    </div> 
</div> 

और सीएसएस नियम: jsfiddle पर

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 

उदाहरण:

div 
{ 
    background-color:black; 
} 
#content{ 
    height:50px; 
    width:50px; 
} 
div > div 
{ 
    border: solid 1px red; 
} 

हम की एक मिलने वाला नियम सेट मिलेगा। यह सुनिश्चित नहीं है कि यह सभी परिदृश्यों के लिए कितना अच्छा काम करेगा लेकिन यह देखने के लिए कुछ हो सकता है कि यह आपकी आवश्यकताओं के अनुरूप होगा या नहीं।

एक से थोड़ा अधिक पूर्ण 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 और न ही ब्राउज़र जावास्क्रिप्ट कोड या स्टाइलशीट फ़ाइल के माध्यम से उपयोग किए गए चयनकर्ताओं का पता लगाता है; चयनकर्ताओं को अंततः शैलियों को लागू करने के लिए, एक या अधिक डोम तत्वों का संदर्भ देने के लिए उपयोग किया जाता है।

तो, यह क्या रखा जाता है शैलियों, उपयोगकर्ता चयनकर्ता नहीं हैं।

उम्मीद है कि इससे मदद मिलती है।