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

HTML DOM Base 目標屬性與 HTML <base> 元素相關聯。它用於設置或返回 <base> 元素的目標屬性的值。 target 屬性用於指定超鏈接將打開的位置。它可以在頁麵本身或新頁麵中打開。

特性

以下是目標屬性的值 -

屬性值	描述
_blank	在新窗口中打開鏈接。
_self	在單擊它的同一框架中打開鏈接。它是默認行為。
_parent	在父框架集中打開鏈接。
_top	在整個窗口中打開鏈接。
framename	在指定的框架名稱中打開鏈接。

用法

以下是語法 -

返回目標屬性 -

baseObject.target

設置目標屬性 -

baseObject.target = "_blank|_self|_parent|_top|framename"

示例

讓我們看一個 HTML DOM 目標屬性的例子 -

<!DOCTYPE html>
<html>
<head>
<base id="Base" target="newframe1" href="https://www.example.com">
</head>
<body>
<p>Click the below button to get the target attribute value</p>
<button onclick="getTarget()">GET TARGET</button>
<p>Click the below button to set the target attribute value</p>
<button onclick="setTarget()">SET TARGET</button>
<p id="Sample"></p>
<script>
   function getTarget() {
      var x = document.getElementById("Base").target;
      document.getElementById("Sample").innerHTML = "Base target for all links is:" + x;
   }
   function setTarget(){
      document.getElementById("Base").target="_blank"
      document.getElementById("Sample").innerHTML="Target has been changed from
      newframe1 to _blank"
   }
</script>
</body>
</html>

輸出

這將產生以下輸出 -

點擊獲取目標 -

單擊設置目標 -

在上麵的例子中 -

我們首先創建了兩個按鈕 GET TARGET 和 SET TARGET 來分別執行函數 getTarget() 和 setTarget() -

<button onclick="getTarget()">GET TARGET</button>
<button onclick="setTarget()">SET TARGET</button>

getTarget() 函數獲取 ID 為 “Base” 的元素，在我們的例子中是 <base> 元素。基本元素目標屬性分配給變量 x。然後使用 innerHTML() 屬性在 ID 為 “Sample” 的段落中顯示目標屬性值。

function getTarget() {
   var x = document.getElementById("Base").target;
   document.getElementById("Sample").innerHTML = "Base target for all links is:" + x;
}

setTarget() 函數獲取 ID 為 “Base” 的元素，在我們的例子中是 <base> 元素。 <base> 元素的目標屬性然後設置為 “_blank” 意味著它將在新選項卡中打開。 “Target has been changed from newframe1 to _blank”然後顯示在id為“Sample”的段落中。

相關用法

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