किसी विशिष्ट तत्व

Question

पर लागू सभी सीएसएस शैलियों की सूची प्राप्त करें क्या किसी विशिष्ट HTML तत्व पर लागू उपयोगकर्ता द्वारा परिभाषित गणना की गई सीएसएस शैलियों की सूची प्राप्त करने का कोई तरीका है। शैलियों को अब बाहरी सीएसएस फ़ाइल या एम्बेडेड/इनलाइन शैली द्वारा उपलब्ध किसी भी फैशन में लागू किया जा सकता है।

.p1{font-size:14px; line-height:20px;}

<style> 
 
    .p1{ line-height:18px; color:green;} 
 
</style> 
 
<p class="p1" style="color:red;">Some Paragraph</p>

अब सूची मेरे पास करने के लिए आवश्यकता होती है, केवल उपयोगकर्ता-निर्धारित नहीं की गणना की शैलियों कारतूस/बातिल/डिफ़ॉल्ट मानों युक्त की पूरी गुच्छा एक तत्व पर लागू शैली के रूप में प्रदान है window.getComputedStyle() द्वारा

सिर्फ मेरे सवाल के बारे में अधिक सटीक होना करने के लिए, मैं एक परिदृश्य में जहाँ मैं एक साइट पहली बार की यात्रा करना चाहते हैं, और मैं डेवलपर उपकरण पट्टी का उपयोग करने के केवल उपयोगकर्ता- प्राप्त करना चाहते हैं परिभाषित शैलियों प्रोग्रामेटिक रूप से (या कुछ लिखकर कंसोल पर ई स्क्रिप्ट)। तो मन में इस परिदृश्य लेने, अंतिम आउटपुट मैं की आवश्यकता है-

{ 
    'color':'red', 
    'line-height' : '18px', 
    'font-size' : '14px' 
} 

कृपया, मेरी क्वेरी या explaination में किसी भी गलती पर मुझे सही करें यदि आवश्यक हो जाना चाहिए।

Answer 1

विधि आप के लिए देख रहे हैं:

window.getComputedStyle() 

देखें:Mozilla Developer Network (MDN) on Window.getComputedStyle();

http://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Window.getComputedStyle() विधि एक तत्व के सभी सीएसएस गुण के मूल्यों देता है सक्रिय स्टाइलशीट को लागू करने और किसी भी मूल गणना को हल करने के बाद उन मानों में शामिल हो सकता है।

---

मार्कअप और अपने प्रश्न में शैलियों के आधार पर:

var para1 = document.getElementsByClassName('p1')[0]; 
var para1Styles = window.getComputedStyle(para1); 

para1Color = para1Styles.getPropertyValue('color'); // red 
para1FontSize = para1Styles.getPropertyValue('font-size'); // 14px 
para1LineHeight = para1Styles.getPropertyValue('line-height'); // 20px 

एक ही विधि भी आप, छद्म तत्वों से शैली संपत्ति मूल्यों को खींचने के लिए दूसरे की घोषणा के द्वारा की अनुमति देगा (वैकल्पिक) तर्क।

उदाहरण के लिए।

var para1AfterStyles = window.getComputedStyle(para1, ':after'); 

Answer 2

मैं भी इस प्रश्न का उत्तर तलाश रहे हैं। मैं एक समाधान के साथ आया है लेकिन यह थोड़ी हैकिश है। हालांकि कुछ हद तक समस्या हल होती है।

function getAppliedComputedStyles(element, pseudo) { 
    var styles = window.getComputedStyle(element, pseudo) 
    var inlineStyles = element.getAttribute('style') 

    var retval = {} 
    for (var i = 0; i < styles.length; i++) { 
     var key = styles[i] 
     var value = styles.getPropertyValue(key) 

     element.style.setProperty(key, 'unset') 

     var unsetValue = styles.getPropertyValue(key) 

     if (inlineStyles) 
      element.setAttribute('style', inlineStyles) 
     else 
      element.removeAttribute('style') 

     if (unsetValue !== value) 
      retval[key] = value 
    } 

    return retval 
} 

अगर यह मदद करता है तो मुझे बताएं।

यह सीएसएस unset संपत्ति मान का उपयोग करता है जो केवल आधुनिक ब्राउज़रों में समर्थित है। https://developer.mozilla.org/en/docs/Web/CSS/unset#Browser_compatibility