छद्म तत्वों से पहले :: बाद और :: के लिए "गणना" शैलियों का निरीक्षण करना संभव है?

Question

क्रोम मुझे और ::before परिभाषाओं (और विरासत परिभाषा इत्यादि) को में मिलान करता है जब मैं किसी तत्व का निरीक्षण करता हूं तो मिलान किए गए सीएसएस नियम फलक। लेकिन गणना की गई स्टाइल फलक रूट तत्व के लिए केवल गणना की गई शैलियों को प्रदर्शित करती है।

मेरे पास कुछ गुणों के साथ छद्म तत्वों के लिए एक संपूर्ण सीएसएस वर्ग पदानुक्रम है और कुछ ओवरराइड इत्यादि हैं, और यह जानना चाहेंगे कि क्या शैलियों के सेट को वास्तव में लागू किया जा सकता है (यानी गणना की गई है) शैलियों फलक रूट तत्व के लिए दिखाता है)

यदि कोई इस पर कोई प्रकाश डाल सकता है, तो यह बेहद सहायक होगा।

संपादित करें - 13 वीं फ़र,, 2014

क्रोम के हाल के संस्करण वास्तव में इस सुविधा में निर्मित शायद यह थोड़ा धागा यह सहित उन लोगों के साथ कुछ करने के लिए किया था है ?? :-)

Answer 1

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

Answer 2

window.getComputedStyle(element[, pseudoElt]) देखने होना चाहिए

pseudoElt वैकल्पिक

एक स्ट्रिंग छद्म तत्व मैच के लिए निर्धारित करता है। नियमित तत्वों के लिए छोड़ा जाना चाहिए (या शून्य)। छद्म-वर्गों को "फोकस" जैसा निर्दिष्ट किया जा सकता है।

मैं संभवतः गलत समझ रहा हूं कि आप क्या करने की कोशिश कर रहे हैं, लेकिन यहां कुछ जावास्क्रिप्ट खेलने के लिए है। मुझे उम्मीद है कि यह उपयोगी है।

यह दस्तावेज़ में प्रत्येक तत्व के माध्यम से पुनरावृत्त करता है और content:before एस और :after एस के प्राप्त करने का प्रयास करता है।
यदि यह कोई पाता है, तो यह विवरण console पर आउटपुट करता है।
सरल, लेकिन demonstrable।

document.querySelectorAll("*").forEach((e) => { 
 
    const ebc = window.getComputedStyle(e, ":before").content, 
 
     eac = window.getComputedStyle(e, ":after").content; 
 
    if (ebc || eac) { 
 
    console.log(e); 
 
    console.log((ebc ? "Before content = " + ebc : "No :before content")); 
 
    console.log((eac ? "After content = " + eac : "No :after content")); 
 
    } 
 
});

div:before { 
 
    content: "This is a test."; 
 
} 
 
p:after { 
 
    content: attr(data-content); 
 
} 
 
span:after { 
 
    content: " dolor"; 
 
}

<div> 
 
    <p data-content="&hellip;">Lorem <span>ipsum</span></p> 
 
</div>