जावास्क्रिप्ट का उपयोग करके HTML तत्व में एक विशेषता कैसे जोड़ें / अपडेट करें?


128

मैं एक तरीका खोजने की कोशिश कर रहा हूं जो जावास्क्रिप्ट का उपयोग करके विशेषता को जोड़ / अपडेट करेगा। मुझे पता है कि मैं इसे setAttribute()फंक्शन के साथ कर सकता हूं लेकिन यह IE में काम नहीं करता है।

जवाबों:


163

आप IE सहित कई अलग-अलग ब्राउज़रों में विशेषताओं के व्यवहार के बारे में यहां पढ़ सकते हैं ।

element.setAttribute()IE में भी चाल करना चाहिए। क्या तुमने कोशिश की? अगर यह काम नहीं करता है, तो शायद element.attributeName = 'value'काम कर सकता है।


5
यह काम। यदि यह मौजूद नहीं है तो यह विशेषता बनाता है और यदि यह मौजूद है तो इसे अपडेट करता है। क्या यह कहीं दस्तावेज है जहाँ तक यह काम करता है?
dev.e.loper

@ dev.e.loper DOM कल्पना शुरू करने के लिए एक अच्छी जगह है: w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/…
valentinas

1
जब मैं निम्नलिखित document.getElementById("nav").setAttribute("class", "active");कार्य करता हूं: तो यह क्रोम जेएस कंसोल में काम करता है, लेकिन वास्तविक पेज में यह काम नहीं करता है..जो विचार नहीं है? वैसे, वास्तविक पृष्ठ में मैं गुंजाइश .jsके अंत से पहले फ़ाइल शामिल करता हूं body
ज्ञातव्य

36

यदि आप पूरी तरह से संगत होना चाहते हैं तो वास्तव में जो आसान लगता है वह मुश्किल है।

var e = document.createElement('div');

मान लें कि आपके पास जोड़ने के लिए 'div1' की एक आईडी है।

e['id'] = 'div1';
e.id = 'div1';
e.attributes['id'] = 'div1';
e.createAttribute('id','div1')
ये सभी IE 5.5 में अंतिम को छोड़कर काम करेंगे (जो इस बिंदु पर प्राचीन इतिहास है लेकिन फिर भी बिना किसी अपडेट के XP का डिफ़ॉल्ट है)।

लेकिन निश्चित रूप से आकस्मिकताएँ हैं। 8 से पहले IE में काम नहीं करेगा: e.attributes['style'] त्रुटि नहीं करेगा, लेकिन वास्तव में वर्ग सेट नहीं करेगा, यह होना चाहिए वर्गनाम e['class']:।
हालाँकि, यदि आप विशेषताओं का उपयोग कर रहे हैं तो यह काम करेगा:e.attributes['class']

सारांश में, विशेषताओं को शाब्दिक और वस्तु-उन्मुख माना जाता है।

शाब्दिक रूप से, आप बस इसे x = 'y' से बाहर निकालना चाहते हैं और इसके बारे में नहीं सोचते हैं। यह वह विशेषता है, setAttribute, createAttribute (IE की शैली अपवाद को छोड़कर) के लिए है। लेकिन क्योंकि ये वास्तव में वस्तुएं हैं, चीजें भ्रमित हो सकती हैं।

चूँकि आप jQuery भीतरी HTML ढलान के बजाय एक DOM तत्व को ठीक से बनाने की समस्या के लिए जा रहे हैं, मैं इसे एक जैसा मानूंगा और e.className = 'fooClass' और e.id = 'fooID' के साथ रहना चाहूँगा। यह एक डिजाइन वरीयता है, लेकिन इस उदाहरण में इलाज करने की कोशिश करना आपके खिलाफ काम करने वाली वस्तु के अलावा कुछ भी नहीं है।

यह अन्य तरीकों की तरह आप पर कभी भी बैकफायर नहीं कर सकता है, बस क्लास के क्लासनेम और स्टाइल के ऑब्जेक्ट होने के बारे में पता होना चाहिए इसलिए यह स्टाइल है। स्टाइल नहीं = "चौड़ाई: 50px"। इसके अलावा टैगनाम याद रखें, लेकिन यह पहले से ही CreateElement द्वारा निर्धारित है, इसलिए आपको इसके बारे में चिंता करने की आवश्यकता नहीं होनी चाहिए।

यह मैं चाहता था की तुलना में लंबा था, लेकिन जेएस में सीएसएस हेरफेर मुश्किल व्यवसाय है।


5
विंडोज XP IE6 के साथ बाहर चला गया, 5.5 नहीं। यह भयानक होगा।
मैजोल सेप

यह idकुछ और के साथ काम करता है , जैसेdata-toggle
स्टालिंगऑन

30

Obligatory jQuery के समाधान । की titleविशेषता को ढूँढता है और सेट करता है foo। ध्यान दें कि यह एक ही तत्व का चयन करता है क्योंकि मैं इसे आईडी द्वारा कर रहा हूं, लेकिन आप चयनकर्ता को बदलकर एक ही विशेषता को संग्रह पर सेट कर सकते हैं।

$('#element').attr( 'title', 'foo' );

3
JQuery समाधान के लिए +1। मेरे मामले में, मैं अपने काम की आवश्यकताओं के कारण jQuery से बचने और शुद्ध जावास्क्रिप्ट में उत्पादन करने की कोशिश कर रहा था। मुझे खुशी है कि दोनों उत्तर मौजूद हैं। धन्यवाद।
न्यूक्लियरपॉन

7

आप विशेषता के साथ क्या करना चाहते हैं? यह एक HTML विशेषता या अपने खुद के कुछ है?

अधिकांश समय आप इसे केवल एक संपत्ति के रूप में संबोधित कर सकते हैं: एक तत्व पर एक शीर्षक सेट करना चाहते हैं? element.title = "foo"करूंगा।

अपने स्वयं के कस्टम जेएस विशेषताओं के लिए DOM स्वाभाविक रूप से एक्स्टेंसिबल (उर्फ एक्सपेंडो = ट्रू) है, जिसका सरल अपशॉट यह है कि आप इसे कर सकते हैं element.myCustomFlag = fooऔर बाद में इसे बिना किसी समस्या के पढ़ सकते हैं ।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.