यह पोस्ट जावास्क्रिप्ट का उपयोग करके HTML तत्व पर एकाधिक विशेषताओं को सेट करने की प्रक्रिया का वर्णन करेगी।
जावास्क्रिप्ट का उपयोग कर किसी तत्व पर एकाधिक गुण कैसे सेट करें?
किसी तत्व पर एक साथ कई विशेषताएँ सेट करने के लिए, पहले विशेषता नामों और मानों के साथ एक वस्तु बनाएँ। 'के साथ एक सरणी के रूप में ऑब्जेक्ट की कुंजियों की सूची प्राप्त करें' वस्तु कुंजी () 'विधि, फिर, निर्दिष्ट HTML तत्व पर सभी विशेषताओं को' के साथ सेट करें सेट एट्रिब्यूट () ' तरीका।
वाक्य - विन्यास
दिए गए सिंटैक्स का उपयोग setAttribute() विधि के लिए किया जाता है:
तत्व। सेट एट्रिब्यूट ( attrName, attrValue ) ;
उपरोक्त सिंटैक्स में दो पैरामीटर हैं: ' नाम ' तथा ' मूल्य ”।
- ' attrName ” नई विशेषता का नाम है।
- ' attrValue ” नई विशेषता का मान है।
- यह विधि एक नई विशेषता बनाएगी और इसे एक मान प्रदान करेगी। यदि निर्दिष्ट विशेषता पहले से मौजूद है, तो इसका मान अपडेट हो जाएगा।
Object.keys() मेथड के लिए दिए गए सिंटैक्स का उपयोग करें:
वस्तु . चांबियाँ ( वस्तु )यह किसी दिए गए ऑब्जेक्ट की एक सरणी देता है।
उदाहरण 1: forEach() Method with setAttribute() Method का उपयोग करके एक एलिमेंट पर मल्टीपल एट्रीब्यूट सेट करें
सबसे पहले, HTML फ़ाइल में एक तत्व बनाएँ:
< बटन आईडी = 'बटन' > लिनक्सहिंट बटन >वर्तमान में, वेब पेज इस तरह दिखेगा:
जावास्क्रिप्ट कोड में, पहले, नाम का एक ऑब्जेक्ट बनाएं “ तत्व गुण ” और नाम और मूल्यों के साथ विशेषताओं को ऑब्जेक्ट में जोड़ें। यहां, हम बटन तत्व के लिए शैली विशेषता, तत्व का नाम और अक्षम गुण जोड़ेंगे:
स्थिरांक तत्व गुण = {शैली : 'बैकग्राउंड-कलर: आरजीबी (153, 28, 49); रंग सफेद;' ,
नाम : 'लिनक्स बटन' ,
अक्षम : '' ,
} ;
अब, नाम के एक फ़ंक्शन को परिभाषित करें ' setMultipleAttributesonElement 'जहां पहले कॉल करें' वस्तु कुंजी () 'ऑब्जेक्ट की चाबियों की सरणी प्राप्त करने की विधि और फिर' का उपयोग करें प्रत्येक के लिए() 'विधि सरणी के माध्यम से पुनरावृति करने के लिए और अंत में कॉल करें' सेट एट्रिब्यूट () निर्दिष्ट HTML तत्व पर सभी परिभाषित विशेषताओं को सेट करने की विधि।
फ़ंक्शन सेटMultipleAttributesonElement ( तत्व, तत्व गुण ) {वस्तु . चांबियाँ ( तत्व गुण ) . प्रत्येक के लिए ( विशेषता => {
तत्व। सेट एट्रिब्यूट ( एट्रिब्यूट, एलिम एट्रिब्यूट्स [ विशेषता ] ) ;
} ) ;
}
'की मदद से अपने असाइन किए गए आईडी का उपयोग करके बटन प्राप्त करें' getElementById () ' तरीका:
स्थिरांक बटन = दस्तावेज़। getElementById ( 'बटन' ) ;परिभाषित फ़ंक्शन को आमंत्रित करें ' setMultipleAttributesonElement ” और तत्व को पहले तर्क के रूप में और दूसरे तर्क के रूप में विशेषताओं की वस्तु को पास करें:
setMultipleAttributesonElement ( बटन, तत्व गुण ) ;आउटपुट दिखाता है कि एक बटन के कई गुण सफलतापूर्वक जोड़े गए हैं:
आप विशेषताओं के लिए एक अलग वस्तु बनाए बिना एक तत्व पर कई विशेषताएँ भी सेट कर सकते हैं। ऐसा करने के लिए, नीचे दिए गए उदाहरण का पालन करें।
उदाहरण 2: लूप के लिए setAttribute() विधि का उपयोग करके एक तत्व पर एकाधिक गुण सेट करें
एक जावास्क्रिप्ट फ़ाइल में दो मापदंडों के साथ एक फ़ंक्शन को परिभाषित करें और 'कॉल करके इसके अंदर कई विशेषताओं को सेट करने के लिए लूप का उपयोग करें' सेट एट्रिब्यूट () ' तरीका:
फ़ंक्शन सेटMultipleAttributesonElement ( तत्व, तत्व गुण ) {के लिये ( चलो मैं elemAttributes में ) {
तत्व। सेट एट्रिब्यूट ( मैं, तत्व गुण [ मैं ] ) ;
}
}
इसके असाइन किए गए आईडी का उपयोग करके बटन को पुनः प्राप्त करें:
स्थिरांक बटन = दस्तावेज़। getElementById ( 'बटन' ) ;नाम-मूल्य जोड़े के रूप में बटन तत्व और कई विशेषताओं को पास करके परिभाषित फ़ंक्शन को कॉल करें:
setMultipleAttributesonElement ( बटन, { 'शैली' : 'बैकग्राउंड-कलर: आरजीबी (153, 28, 49); कलर: व्हाइट;' , 'अक्षम' : '' , 'नाम' : 'लिनक्स बटन' } ) ;उत्पादन
हमने जावास्क्रिप्ट का उपयोग करके HTML तत्व पर एकाधिक विशेषताओं को सेट करने से संबंधित सभी आवश्यक जानकारी संकलित की है।
निष्कर्ष
जावास्क्रिप्ट पूर्वनिर्धारित सेट एट्रिब्यूट () 'विधि का उपयोग किसी तत्व के लिए एकल या एकाधिक विशेषताओं को सेट करने के लिए किया जाता है। किसी तत्व पर एकाधिक विशेषताओं को सेट करने के लिए, पहले एक ऑब्जेक्ट बनाएं जिसमें विशेषताएँ नाम-मान के रूप में हों। 'का उपयोग करके किसी सरणी में वस्तुओं की कुंजियाँ प्राप्त करें' वस्तु कुंजी () 'विधि, फिर निर्दिष्ट तत्वों पर सभी विशेषताओं को' के साथ सेट करें सेट एट्रिब्यूट () ' तरीका। इस पोस्ट में, हमने जावास्क्रिप्ट का उपयोग करके एक HTML तत्व पर कई विशेषताओं को सेट करने की प्रक्रिया का वर्णन किया है।