सीएसएस-चयनकर्ता जब एक HTML दस्तावेज़ एक iframe के अंदर है? - सीएसएस, सीएसएस 3

मैं एक सीएसएस-चयनकर्ता बनाने की कोशिश कर रहा हूं जो मौसम के आधार पर विभिन्न गुणों को असाइन करता है, एचटीएमएल आईफ्रेम के अंदर है या नहीं। मैंने यह कोशिश की:

html:not(:root) body {
background: black !important;
}

मैं इसे लागू करने की उम्मीद करता हूं background: black; शरीर के लिए अगर यह एक आईफ्रेम के अंदर है, लेकिन यह नहीं है, क्यों? और क्या कोई सीएसएस विकल्प हैं? यदि एचटीएमएल रूट है तो मैं हमेशा जावास्क्रिप्ट से जांच सकता हूं।

आईई 8 समर्थन की आवश्यकता नहीं है।

उत्तर:

उत्तर № 1 के लिए 12

सीएसएस केवल उसी दस्तावेज़ के भीतर scoped है। एक आईफ्रेम अपने पूरे अधिकार में एक संपूर्ण दस्तावेज़ है, और इसलिए एक सीएसएस नियम जो पृष्ठ पर लागू होता है शामिल कि iframe उस पृष्ठ पर लागू नहीं हो सकता है जो "एस है अंदर वह iframe।

इसका मतलब है कि जहां तक ​​एचटीएमएल और सीएसएस का संबंध है, html है हमेशा :root (और इसलिए कर सकते हैं कभी नहीँ होना :not(:root))।

जब तक आप इस सीएसएस को उस पृष्ठ से आईफ्रेम के भीतर पृष्ठ पर स्थानांतरित करने में सक्षम नहीं हैं (उदाहरण के लिए एक स्क्रिप्ट का उपयोग करके), मुझे विश्वास नहीं है कि केवल सीएसएस का उपयोग करने का एक तरीका है।


जवाब के लिए 9 № 2

जावास्क्रिप्ट के साथ एक आईफ्रेम में स्टाइल करना शायद संभव है।

document.querySelector("iframe").contentDocument.body.querySelector("#some-element").style.background-color = "red";

जरूरी: सुनिश्चित करें कि iframe एक ही डोमेन पर है, अन्यथा आप अपने आंतरिक तक पहुंच प्राप्त नहीं कर सकते हैं। यह क्रॉस-साइट स्क्रिप्टिंग होगा।

जावास्क्रिप्ट दस्तावेज़ के साथ iframes के अंदर तत्वों को एक्सेस करना यहां फ़्यूचर: जावास्क्रिप्ट - iFrame के भीतर से तत्व प्राप्त करें


उत्तर के लिए -2 № 3
html:not(root) body {
background: black !important;
}

काम करता है


संबंधित सवाल
सबसे लोकप्रिय