HTML DOM Base href屬性用法及代碼示例

HTML DOM Base href 屬性與 <base> HTML 標記相關聯。 <base> 標簽用於為當前 HTML 文檔中的所有相對 URL 指定基本 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 按鈕 -

單擊“獲取它”按鈕 -

在上麵的例子中 -

我們首先創建了一個id 為 “myBase” 且屬性 href 值等於的元素https://www.bing.com

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

然後我們創建了一個帶有屬性 href 和值等於 “/images” 的錨元素。這裏 “/images” 是一個相對路徑，因為基本路徑在基本標簽中給出。結合基本和錨元素 URL，它將成為 https://www.bing.com/images。

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

然後我們創建了兩個按鈕 SET IT 和 GET IT 來分別調用函數 SetHref() 和 GetHref()。

<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;
}

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM Base href Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。