getComputedStyle एक CSSStyleDeclaration देता है लेकिन सभी गुण

Question

पर खाली हैं, मेरे पास एक सरल div है जो एक सीएसएस क्लास का उपयोग करता है जो बदले में color और background-color प्रॉपर्टी सेट है।

var div = document.createElement("div"); 
div.classList.add("my-css-class"); 
container.appendChild(div); 

//This prints out a CSSStyleDeclaration object. This is a large object to which I see `color` and `backgroundColor` 
console.log(getComputedStyle(div)); 

//this gives me an empty string 
console.log(getComputedStyle(div).color); 

//this gives me an empty string 
console.log(getComputedStyle(div).getPropertyValue("color")); 

मैं CSSStyleDeclaration के गुणों तक पहुंचने में असमर्थ क्यों हूं? मुझे पता है कि यह मेरे पहले लॉग से है। मैं देख सकता हूं color: "rgb(82, 194, 145)"

Answer 1

आखिरकार getComputedStyle के साथ समस्या यह है कि ऐसा लगता है कि प्रश्न में तत्व किसी भी शैली के उपलब्ध होने के लिए डोमट्री का हिस्सा होना चाहिए।

मेरे मामले में नोटिस, मैं मूल कंटेनर में div जोड़ रहा था, हालांकि, तत्कालता के बिंदु पर मूल कंटेनर अभी तक डोमट्री में नहीं जोड़ा गया है।

ऑब्जेक्ट को प्रिंट करने के लिए JSON.stringify() का उपयोग करने में मेरी विफलता का मतलब है कि मान बाद में दिखाई दे रहे थे लेकिन पहुंच के समय खाली थे।

तो मूल रूप से, मैंने अपनी container.appendChild को document.body.appendChild अस्थायी रूप से उस शैली की गणना करने के लिए अस्थायी रूप से बदल दिया जिसकी मुझे आवश्यकता है, और फिर इसे हटा दें और मुझे केवल उन रंगों को छोड़कर इसे नष्ट कर दें।