जावास्क्रिप्ट में, ऐसे वेब पेज होते हैं जिन्हें आकर्षक लेआउट की आवश्यकता होती है, जैसे डार्क बैकग्राउंड जो आमतौर पर इंटरफेस के लिए बेहतर काम करते हैं। इसी तरह, सफेद पृष्ठभूमि पाठकों को सामग्री पर ध्यान केंद्रित करने देती है, और इसलिए समाचार पोर्टल या ब्लॉग गहरे पाठ के साथ तुलनात्मक रूप से हल्की पृष्ठभूमि का उपयोग करते हैं। ऐसे मामलों में, दस्तावेज़ डिज़ाइन को स्वरूपित करने और सुधारने में जावास्क्रिप्ट बहुत उपयोगी हो जाता है।
यह लेख जावास्क्रिप्ट में पृष्ठभूमि छवि को बदलने के तरीकों पर चर्चा करेगा।
जावास्क्रिप्ट में बैकग्राउंड इमेज कैसे बदलें?
जावास्क्रिप्ट में पृष्ठभूमि छवि को बदलने के लिए, निम्नलिखित तरीकों का उपयोग किया जा सकता है:
- ' पृष्ठभूमि छवि 'पर संपत्ति' डोम '
- ' getElementById () 'विधि और' पृष्ठभूमि छवि 'पर संपत्ति' अनुच्छेद '
चर्चा की गई विधियों को एक-एक करके देखें!
विधि 1: DOM पर बैकग्राउंड इमेज प्रॉपर्टी का उपयोग करके जावास्क्रिप्ट में बैकग्राउंड इमेज बदलें।
' पृष्ठभूमि छवि 'गुण निर्दिष्ट तत्व की पृष्ठभूमि छवि को समायोजित करता है। इस तकनीक को बैकग्राउंडइमेज प्रॉपर्टी को लागू करके और एक तर्क के रूप में इसके पथ का पता लगाकर बैकग्राउंड इमेज को निर्दिष्ट करके लागू किया जा सकता है।
वाक्य - विन्यास
उपरोक्त वाक्य रचना में, ' यूआरएल 'छवि के पथ को संदर्भित करता है।
प्रदर्शन के लिए निम्नलिखित उदाहरण देखें।
उदाहरण
इस उदाहरण में, निर्दिष्ट मान के साथ एक बटन शामिल किया जाएगा और ' क्लिक पर 'घटना को पुनर्निर्देशित करना a
बैकग्राउंड इमेज () नाम का फंक्शन:
अब, एक समारोह ' पृष्ठभूमि छवि() 'घोषित किया जाएगा और' document.body.style.backgroundImage संपत्ति अपने तर्क में निर्दिष्ट छवि पथ का उपयोग करके पृष्ठभूमि छवि तक पहुंच जाएगी:
उपरोक्त कार्यान्वयन का परिणाम निम्नानुसार होगा:
विधि 2: जावास्क्रिप्ट में पृष्ठभूमि छवि बदलें getElementById () विधि और पैराग्राफ पर पृष्ठभूमि छवि गुण का उपयोग कर
' getElementById () 'विधि एक निर्दिष्ट मान के साथ एक तत्व देता है और' पृष्ठभूमि छवि संपत्ति, जैसा कि ऊपर कहा गया है, अपने तर्क में निर्दिष्ट विशेष तत्व की पृष्ठभूमि छवि देता है। इस पद्धति को विशेष पैराग्राफ की पृष्ठभूमि पर निर्दिष्ट रंग को मैप करने के लिए लागू किया जा सकता है।
वाक्य - विन्यास
यहां, ' तत्वों 'किसी तत्व की आईडी को संदर्भित करता है।
बताई गई अवधारणा की बेहतर समझ के लिए निम्नलिखित उदाहरण को देखें।
उदाहरण
सबसे पहले,
टैग में एक पैराग्राफ़ शामिल करें और इसे एक विशिष्ट आईडी असाइन करें:
इसके बाद, एक ऑनक्लिक ईवेंट के साथ एक बटन बनाएं जो फंक्शन बैकग्राउंडइमेज () तक पहुँचता है जैसा कि पिछली विधि में चर्चा की गई थी:
अंत में, 'नामक समारोह घोषित करें' पृष्ठभूमि छवि() ' इसी तरह। यहां, 'का उपयोग करके परिभाषित आईडी तक पहुंचें' getElementById () 'विधि और उस पर निर्दिष्ट पृष्ठभूमि छवि लागू करें। इसका परिणाम पैराग्राफ की पृष्ठभूमि पर रंग के कार्यान्वयन में होगा:
उत्पादन
हमने जावास्क्रिप्ट में पृष्ठभूमि छवि बदलने के लिए सबसे आसान तरीका संकलित किया है
निष्कर्ष
जावास्क्रिप्ट में पृष्ठभूमि छवि बदलने के लिए, 'लागू करें' पृष्ठभूमि छवि 'पर संपत्ति' डोम “किसी फ़ंक्शन का उपयोग करके या विशिष्ट आईडी प्राप्त करके पूरे वेब पेज पर निर्दिष्ट पृष्ठभूमि छवि को लागू करने के लिए ” getElementById () 'विधि और आवेदन' पृष्ठभूमि छवि 'निर्दिष्ट पर संपत्ति' अनुच्छेद ' यह ब्लॉग जावास्क्रिप्ट में पृष्ठभूमि छवियों को बदलने के तरीकों को दिखाता है।