यह पोस्ट HTML DOM Style “backgroundImage” प्रॉपर्टी के काम करने और उपयोग के बारे में बताती है।
जावास्क्रिप्ट में HTML DOM स्टाइल 'बैकग्राउंडइमेज' प्रॉपर्टी का उपयोग कैसे करें?
एचटीएमएल डोम शैली ' पृष्ठभूमि छवि ” संपत्ति का उपयोग HTML तत्व और दस्तावेज़ को उसके पथ का संदर्भ देकर एक पृष्ठभूमि छवि को जोड़कर अनुकूलित करने के लिए किया जाता है।
सिंटेक्स ('पृष्ठभूमि छवि' संपत्ति सेट करना)
वस्तु। शैली . पृष्ठभूमि छवि = 'यूआरएल('यूआरएल')|कोई नहीं|प्रारंभिक|विरासत'उपरोक्त सिंटैक्स निम्नलिखित 'पृष्ठभूमि छवि' गुण मानों का समर्थन करता है:
- यूआरएल ('यूआरएल'): यह वांछित पृष्ठभूमि छवि का स्थान निर्दिष्ट करता है।
- कोई नहीं: यह डिफ़ॉल्ट मान का प्रतिनिधित्व करता है यानी, कोई पृष्ठभूमि छवि नहीं।
- प्रारंभिक: यह ब्राउज़र के डिफ़ॉल्ट मान के समान है।
- उत्तराधिकारी: यह संपत्ति को अपने मूल तत्व से प्राप्त करता है।
सिंटेक्स ('पृष्ठभूमि छवि' संपत्ति का रिटर्निंग यूआरएल)
वस्तु। शैली . पृष्ठभूमि छवियह सिंटैक्स जोड़े गए बैकग्राउंड इमेज के URL वाले स्ट्रिंग मान को लौटाता है।
शैली 'पृष्ठभूमि छवि' संपत्ति के उपयोग की व्याख्या करने के लिए उपरोक्त परिभाषित सिंटैक्स का व्यावहारिक रूप से उपयोग करें।
उदाहरण 1: बैकग्राउंड इमेज सेट करने के लिए स्टाइल 'बैकग्राउंडइमेज' गुण लागू करें
यह उदाहरण शैली लागू करता है ' पृष्ठभूमि छवि ” संपत्ति अपने URL को निर्दिष्ट करके वांछित पृष्ठभूमि छवि को दस्तावेज़ में सेट करने के लिए।
HTML कोड
पहले, बताए गए HTML कोड पर एक नज़र डालें:
< एच 2 > उपयोग एचटीएमएल डोम शैली जावास्क्रिप्ट में पृष्ठभूमि छवि संपत्ति एच 2 >
< बटन ऑनक्लिक = 'माईफंक ()' > यहाँ क्लिक करें बटन >
इस कोड में:
- ' <एच2> ” टैग लेवल 2 का सबहेडिंग जोड़ता है।
- ' <बटन> 'टैग संलग्न होने वाला एक बटन बनाता है' क्लिक पर 'घटना समारोह को निष्पादित करने के लिए' मायफंक () ”बटन क्लिक पर।
जावास्क्रिप्ट कोड
अगला, दिए गए जावास्क्रिप्ट कोड का पालन करें:
< लिखी हुई कहानी >समारोह myFunc ( ) {
दस्तावेज़। शरीर . शैली . पृष्ठभूमि छवि = 'url('./html&css/image.jpg')' ;
}
लिखी हुई कहानी >
उपरोक्त कोड स्निपेट में:
- समारोह का नाम ' मायफंक () ' परिभाषित किया गया।
- इसकी परिभाषा में, ' Style.backgroundImage 'संपत्ति निर्दिष्ट लागू होती है' यूआरएल ” पूरे दस्तावेज़ की पृष्ठभूमि के लिए छवि।
उत्पादन
आउटपुट दिखाता है कि बटन क्लिक करने पर पृष्ठभूमि छवि पूरे दस्तावेज़ में जुड़ जाती है।
उदाहरण 2: पृष्ठभूमि छवि का URL वापस करने के लिए शैली 'पृष्ठभूमि छवि' गुण लागू करें
' पृष्ठभूमि छवि ” पृष्ठभूमि छवि का URL वापस करने के लिए संपत्ति भी फायदेमंद है। आइए इसे व्यावहारिक रूप से देखें।
HTML कोड
सबसे पहले, लिखित HTML कोड से गुजरें:
< एच 2 > उपयोग एचटीएमएल डोम शैली जावास्क्रिप्ट में पृष्ठभूमि छवि संपत्ति एच 2 >< डिव आईडी = 'माईडिव' शैली = 'ऊंचाई: 500 पीएक्स; चौड़ाई: 500 पीएक्स;
बॉर्डर: 3px सॉलिड ब्लैक;बैकग्राउंड-इमेज:url('./html&css/image.jpg')' > यह एक डिव है डिव >
< एच4 आईडी = 'डेमो' >> एच 4 >
उपरोक्त कोड ब्लॉक में:
- ' पृष्ठभूमि छवि ” संपत्ति का उपयोग “” तत्व में किया जाता है जो दिए गए यूआरएल से संबंधित पृष्ठभूमि छवि जोड़ता है।
- ' <एच4> ” तत्व स्तर 4 का एक खाली उपशीर्षक बनाता है जो जोड़े गए पृष्ठभूमि छवि के लौटाए गए मान (यूआरएल) को प्रदर्शित करता है।
जावास्क्रिप्ट कोड
अब, जावास्क्रिप्ट कोड पर आगे बढ़ें:
< लिखी हुई कहानी >
चलो आईएमजी = दस्तावेज़। getElementById ( 'माईडिव' ) . शैली . पृष्ठभूमि छवि ;
दस्तावेज़। getElementById ( 'डेमो' ) . innerHTML = आईएमजी ;
लिखी हुई कहानी >इस कोड ब्लॉक में:
- चर घोषित करें ' आईएमजी 'जो' का उपयोग करता है दस्तावेज़.getElementById () ' अपनी आईडी 'myDiv' के माध्यम से '' तत्व तक पहुंचने की विधि और 'के माध्यम से एक पृष्ठभूमि छवि लागू करती है' पृष्ठभूमि छवि ' संपत्ति।
- अगला, 'document.getElementById ()' विधि संलग्न पृष्ठभूमि छवि के यूआरएल को प्रदर्शित करने के लिए अपनी आईडी 'डेमो' का उपयोग करके खाली उपशीर्षक प्राप्त करती है।
उत्पादन
आउटपुट 'div' तत्व पर लागू पृष्ठभूमि छवि का URL प्रदर्शित करता है।
निष्कर्ष
जावास्क्रिप्ट शैली का उपयोग करता है ' पृष्ठभूमि छवि वांछित HTML तत्व को पृष्ठभूमि छवि निर्दिष्ट करने या उसका URL वापस करने के लिए संपत्ति। यह पृष्ठभूमि छवि सेट करने के लिए 'प्रारंभिक', 'विरासत', 'यूआरएल', और 'कोई नहीं' सहित चार संपत्ति मूल्यों का समर्थन करता है। हालाँकि, यह पृष्ठभूमि छवि का URL प्राप्त करने के लिए किसी भी मान का समर्थन नहीं करता है। इस पोस्ट ने जावास्क्रिप्ट में HTML DOM स्टाइल 'बैकग्राउंड इमेज' प्रॉपर्टी का उपयोग करने के लिए एक संक्षिप्त विवरण प्रदान किया।