HTML DOM Base href प्रॉपर्टी

HTML DOM Base href प्रॉपर्टी <base> HTML टैग से जुड़ी है। <base> टैग का उपयोग वर्तमान HTML दस्तावेज़ में सभी सापेक्ष URLs के लिए बेस URL निर्दिष्ट करने के लिए किया जाता है। एक HTML दस्तावेज़ में अधिकतम एक <base> टैग हो सकता है। Base href प्रॉपर्टी base एलिमेंट में href एट्रिब्यूट के मान को लौटाती है।

सिंटैक्स

निम्नलिखिक सिंटैक्स है -

href प्रॉपर्टी सेट करना -

baseObject.href = URL

यहां, URL बेस URL है।

href प्रॉपर्टी लौटाना -

baseObject.href

उदाहरण

आइए Base href प्रॉपर्टी का एक उदाहरण देखें -

<!DOCTYPE html> <html> <head> <base id="myBase" href="https://www.bing.com"> </head> <body> <a href="/images">IMAGES</a> <p>Click the below button to change href value of the above link</p> <button onclick="SetHref()">SET IT</button> <button onclick="GetHref()">GET IT</button> <p id="Sample"></p> <script>    function SetHref() {       document.getElementById("myBase").href = "https://duckduckgo.com";       document.getElementById("Sample").innerHTML = "Base URL was changed from bing.com       to duckduckgo.com";    }    function GetHref(){       var x=document.getElementById("myBase").href;    document.getElementById("Sample").innerHTML = x;    } </script> </body> </html>

आउटपुट

यह निम्नलिखित आउटपुट उत्पन्न करेगा -

SET IT बटन पर क्लिक करने पर -

GET IT बटन पर क्लिक करने पर -

उपरोक्त उदाहरण में -

हमने पहले id “myBase” के साथ एक  एलिमेंट बनाया है और एट्रिब्यूट href जिसका मान https://www.bing.com के बराबर है

<base id="myBase" href="https://www.bing.com">

फिर हमने एट्रिब्यूट href और मान “/images” के बराबर एक एंकर एलिमेंट बनाया है। यहां “/images” एक सापेक्ष पथ है क्योंकि बेस पथ base टैग में दिया गया है। दोनों base और एंकर एलिमेंट URL को मिलाकर यह https://www.bing.com/images बन जाएगा।

<a href="/images">IMAGES</a>

फिर हमने SetHref() और GetHref() फ़ंक्शन को क्रमशः कॉल करने के लिए SET IT और GET IT नाम के दो बटन बनाए।

<button onclick="SetHref()">SET IT</button> <button onclick="GetHref()">GET IT</button>

SetHref() फ़ंक्शन “myBase” id का उपयोग करके <base> एलिमेंट को प्राप्त करता है। यह फिर href प्रॉपर्टी का उपयोग करके इसके URL को https://www.duckduckgo.com पर सेट करता है। परिवर्तन सफलता संदेश को id “Sample” वाले पैराग्राफ में प्रदर्शित किया जाता है।

function SetHref() {    document.getElementById("myBase").href = "https://duckduckgo.com";    document.getElementById("Sample").innerHTML = "Base URL was changed from bing.com to .comduckduckgo"; }

GetHref() “myBase” id का उपयोग करके <base> एलिमेंट को प्राप्त करता है। यह फिर href प्रॉपर्टी का उपयोग करके इसका URL प्राप्त करता है और इसे वेरिएबल x को असाइन करता है। पैराग्राफ innerHTML को फिर innerHTML() प्रॉपर्टी का उपयोग करके x में बदल दिया जाता है। यह <base> एलिमेंट के href मान को प्रदर्शित करेगा।

function GetHref(){    var x=document.getElementById("myBase").href;    document.getElementById("Sample").innerHTML = x; }