यह गाइड जावास्क्रिप्ट में HTML DOM एलिमेंट 'स्टाइल' प्रॉपर्टी के उद्देश्य और कार्यप्रणाली के बारे में विस्तार से बताती है।
जावास्क्रिप्ट में HTML DOM एलिमेंट 'स्टाइल' प्रॉपर्टी कैसे काम करती है?
एचटीएमएल डोम ' शैली ” एक रीड-ओनली प्रॉपर्टी है जो आवंटित स्टाइलिंग प्रॉपर्टीज के अनुसार काम करती है। इसके अलावा, यह 'लौटाता है CSSStyleDeclaration ” ऑब्जेक्ट जिसमें विशेष HTML तत्व की सभी इनलाइन शैली विशेषताएँ होती हैं।
टिप्पणी: 'CSSStyleDeclaration' ऑब्जेक्ट में हेड सेक्शन में परिभाषित CSS स्टाइल विशेषताएँ होती हैं।
सिंटेक्स (एक शैली संपत्ति सेट करें)
तत्व। शैली . संपत्ति = कीमतउपरोक्त सिंटैक्स के अनुसार, ' शैली 'संपत्ति केवल एक पैरामीटर का समर्थन करती है' कीमत ” जो निर्दिष्ट स्टाइलिंग संपत्ति के मूल्य का प्रतिनिधित्व करता है।
सिंटेक्स (रिटर्न ए स्टाइल प्रॉपर्टी)
तत्व। शैली . संपत्तिआइए व्यावहारिक रूप से 'शैली' संपत्ति के ऊपर चर्चा किए गए सिंटैक्स को लागू करें।
उदाहरण 1: किसी विशेष HTML तत्व का रंग सेट करने के लिए “शैली” गुण का उपयोग करें
यह उदाहरण 'के मूल सिंटैक्स को लागू करता है' शैली ” गुण 'शैली' संपत्ति का मान सेट करने के लिए जैसे कि विशेष HTML तत्व का रंग बदल जाता है।
HTML कोड
सबसे पहले, दिए गए HTML कोड को देखें:
< एच 2 > जावास्क्रिप्ट में शैली संपत्ति का प्रयोग करें एच 2 >
< h3 आईडी = 'एच3' > दूसरा उपशीर्षक। h3 >
उपरोक्त कोड लाइनों में:
- ' <एच2> ” HTML टैग पहले उपशीर्षक को निर्दिष्ट करता है।
- ' <एच3> ” टैग असाइन किए गए आईडी 'H3' के साथ लेवल 3 का दूसरा सबहेडिंग बनाता है।
जावास्क्रिप्ट कोड
अगला, बताए गए जावास्क्रिप्ट कोड का पालन करें:
< लिखी हुई कहानी >दस्तावेज़। getElementById ( 'एच3' ) . शैली . रंग = 'हरा' ;
लिखी हुई कहानी >
उपरोक्त कोड स्निपेट में, ' दस्तावेज़.getElementById () 'विधि शामिल है' <एच3> 'तत्व अपनी आईडी के माध्यम से' एच 3 'निर्दिष्ट सेट करने के लिए' रंग 'के माध्यम से तत्व का गुण मान' शैली। रंग ' संपत्ति।
उत्पादन
आउटपुट दिखाता है कि लक्षित HTML तत्व दृश्य प्रतिनिधित्व 'शैली' संपत्ति का उपयोग करके तदनुसार सेट किया गया है।
उदाहरण 2: लागू 'शैली' विशेषता का मान प्राप्त करने के लिए 'शैली' गुण का उपयोग करें
इस उदाहरण में, 'शैली' संपत्ति अपने सामान्यीकृत सिंटैक्स (रिटर्न ए स्टाइल प्रॉपर्टी) का उपयोग करके HTML तत्व की निर्दिष्ट 'शैली' विशेषता का पता लगाने में मदद करती है।
HTML कोड
HTML कोड यहाँ कहा गया है:
< एच 2 > जावास्क्रिप्ट में शैली संपत्ति का प्रयोग करें एच 2 >< h3 आईडी = 'एच3' शैली = 'पृष्ठभूमि-रंग: नारंगी;' > द्वितीय उपशीर्षक पृष्ठभूमि रंग का मान है : h3 >
< एच4 आईडी = 'डेमो' >> एच 4 >
इस कोड में:
- ' <एच3> ” HTML टैग “शैली” विशेषता का उपयोग करता है जो “
” HTML तत्व की पृष्ठभूमि का रंग सेट करता है।
- ' <एच4> 'टैग एक आईडी वाले स्तर 4 का एक खाली उपशीर्षक बनाता है' डेमो ”।
जावास्क्रिप्ट कोड
अब, दिए गए जावास्क्रिप्ट कोड को देखें:
< लिखी हुई कहानी >कॉन्स्ट कीमत = दस्तावेज़। getElementById ( 'एच3' ) . शैली . पृष्ठभूमि का रंग ;
दस्तावेज़। getElementById ( 'डेमो' ) . innerHTML = कीमत ;
लिखी हुई कहानी >
ऊपर लिखित कोड में:
- चर ' कीमत '' के साथ घोषित किया गया है कॉन्स्ट ” कीवर्ड जो “लागू होता है” दस्तावेज़.getElementById () लागू 'शैली' विशेषता का मान प्राप्त करने के लिए अपनी आईडी का उपयोग करके '
' तत्व लाने की विधि और इसे 'शैली' संपत्ति के माध्यम से तत्व यानी '
' पर लागू करना।
- 'document.getElementById ()' विधि का उपयोग फिर से जोड़े गए खाली '
' तत्व तक पहुँचने के लिए किया जाता है और प्राप्त किए गए HTML तत्व के विरुद्ध आवंटित 'शैली' विशेषता का मान प्रदर्शित करता है और इसे 'के माध्यम से एक उपशीर्षक के रूप में संलग्न करता है' innerHTML ' संपत्ति।
उत्पादन
आउटपुट पृष्ठभूमि रंग को तत्व पर लागू करता है और सेट 'शैली' विशेषता का मान भी तदनुसार लौटाया जाता है।
निष्कर्ष
जावास्क्रिप्ट का उपयोग करता है ' शैली HTML DOM तत्व के इनलाइन 'शैली' गुणों को असाइन करने और वापस करने के लिए 'संपत्ति। वांछित कार्यक्षमता को तदनुसार लागू करने के लिए इसे अतिरिक्त 'मूल्य' की आवश्यकता होती है। सेटिंग और पुनः प्राप्त करने के अलावा, मौजूदा 'शैली' विशेषता को बदलना भी फायदेमंद है। इस गाइड ने HTML DOM एलिमेंट स्टाइल प्रॉपर्टी के मुख्य उद्देश्य, कार्य और व्यावहारिक कार्यान्वयन को प्रदर्शित किया।