जावास्क्रिप्ट के साथ HTML तत्व विशेषता मान को बदलने का तरीका जानें।
मान लें कि आपके पास वेबसाइट पर एक एंकर तत्व है, जिसमें href में एक दोषपूर्ण URL लिंक पथ है। मान बताइए।
यह देखने के लिए एक आम बात है कि यह आपके मेनू/नेविगेशन बार में होगा:
<nav>
<ul>
<li>
<a href="/path-to-your-page" id="some-id">Link</a>
</li>
</ul>
</nav>आंतरिक वेब पेज लिंक रखने का एक अन्य सामान्य स्थान आपकी वेबसाइट के निचले भाग में आपके पाद लेख में है।
मान लीजिए किसी ने गलती की है। आपका href मान /contact-me . है लेकिन यह /contact-us होना चाहिए , और किसी भी कारण से, आप इसे सीधे HTML कोड में हल नहीं कर सकते (शायद आपके पास बैकएंड पर लेखन पहुंच नहीं है)।
आपको इसे यथाशीघ्र ठीक करने की आवश्यकता है ताकि आपके विज़िटर इस पर क्लिक करने पर एक खाली पृष्ठ न देखें।
यदि आपके पास फ़्रंटएंड कोड तक पहुंच है, उदा। एक सीएमएस (सामग्री प्रबंधन प्रणाली) के माध्यम से आप बैकएंड को छुए बिना, अपने एंकर तत्व पर मौजूदा href मान को ओवरराइड करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं।
मैं आपको इसे करने के दो अलग-अलग तरीके दिखाऊंगा।
ID के आधार पर तत्व चुनें
मान लें कि आपका HTML मार्कअप इस तरह दिखता है, प्रत्येक नेविगेशन लिंक पर एक अद्वितीय आईडी के साथ:
<nav>
<ul>
<li>
<a href="/" id="home">Home</a>
</li>
<li>
<a href="/services" id="services">Services</a>
</li>
<li>
<a href="/contact-me" id="contact">Contact</a>
</li>
</ul>
</nav>अब हम संपर्क लिंक पर href मान बदलना चाहते हैं।
सबसे पहले, अपने एंकर/लिंक एलिमेंट को उसकी आईडी के आधार पर चुनें:
const contactLink = document.querySelector('#contact')
फिर href . चुनने के लिए डॉट नोटेशन का उपयोग करें अपने एंकर तत्व की विशेषता और इसे /contact-us . का एक नया मान दें :
contactLink.href === '/contact-us'बस!
अब यदि आप इसे अपने कंसोल में लॉग करते हैं, तो आप देखेंगे कि पिछले दोषपूर्ण href विशेषता मान को नए सही URL पथ से बदल दिया गया है:
console.log(contactLink.href)
// output: "https://your-domain.com/contact-us"सभी JS कोड:
// Select anchor/link element based on its ID
const contactLink = document.querySelector('#contact')
// Change href value
contactLink.href === '/contact-us'
// Print result
console.log(contactLink.href)एक विशिष्ट स्ट्रिंग मान के आधार पर तत्व का चयन करें
आप ऐसी स्थिति में हो सकते हैं जहां आपके HTML लिंक तत्व में कोई विशिष्ट आईडी या वर्ग न हो। आपका HTML मार्कअप ऐसा दिखाई दे सकता है
<nav>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/services">Services</a>
</li>
<li>
<a href="/contact-me">Contact</a>
</li>
</ul>
</nav>
कोई दिक्कत नहीं है। आप querySelector() . के साथ CSS3 के चयनकर्ता का उपयोग कर सकते हैं यह निर्दिष्ट करने के लिए कि आप एक सटीक स्ट्रिंग मान का चयन करना चाहते हैं, इस मामले में /contact-me .
यह कैसे करना है:
const contactLink = document.querySelector('a[href*="/contact-me"]')अब अपने वेरिएबल से href मान प्रिंट करें यह देखने के लिए कि क्या आपको वास्तव में वह href मान मिला है जिसे आप ढूंढ रहे थे:
console.log(contactLink.href)
// output: "https://your-domain.com/contact-me" यह किया!
अब आप href को बदल सकते हैं पिछले उदाहरण की तरह ही सही URL पथ का मान:
contactLink.href === '/contact-us'सभी कोड:
// Select link with specific href string value
const contactLink = document.querySelector('a[href*="/contact-me"]')
// Change href string value
contactLink.href = '/contact-us'
// Print result
console.log(contactLink.href)