HTML DOM 锚点 target 属性


HTML DOM target 属性与锚点标签 (<a>) 相关联,它指定点击 URL 后新网页将在哪里打开。它可以具有以下值:

  • _blank − 这将在新窗口中打开链接文档。
  • _parent − 这将在父框架集中打开链接文档。
  • _top − 这将在完整的正文窗口中打开链接文档。
  • _self − 这将在同一窗口中打开链接文档。这是默认行为。
  • framename − 这将在指定的 framename 中打开链接文档。

语法

以下是语法:

返回 target 属性:

anchorObject.target

设置 target 属性:

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

示例

让我们来看一个锚点 target 属性的例子:

在线演示

<!DOCTYPE html>
<html>
<body>
<p><a id="Anchor" target="_self" href="https://www.examplesite.com">example site</a></p>
<p><a id="Anchor2" href="https://www.examplesite.com">example site</a></p>
<p>Click the button to see the value of the target attribute.</p>
<button onclick="getTarget1()">GetTarget</button>
<button onclick="setTarget2()">SetTarget</button>
<p id="Target1"></p>
<script>
   function getTarget1() {
      var x = document.getElementById("Anchor").target;
      document.getElementById("Target1").innerHTML = x;
   }
   function setTarget2(){
      document.getElementById("Anchor2").innerHTML="Target has been set";
      document.getElementById("Target1").target="newframe";
   }
</script>
</body>
</html>

输出

这将产生以下输出:

点击“GetTarget”按钮后:

点击“SetTarget”按钮后:

在上面的例子中:

我们使用了一个带有 target 属性和 _self 值的锚点标签,以及另一个带有默认 _blank 值的锚点标签。

<p><a id="Anchor" target="_self" href="https://www.examplesite.com">example site</a></p>
<p><a id="Anchor2" href="https://www.examplesite.com">example site</a></p>

然后,我们创建了两个名为 GetTarget 和 SetTarget 的按钮,分别执行 getTarget1() 和 setTarget2() 函数。

<button onclick="getTarget1()">GetTarget</button>
<button onclick="setTarget2()">SetTarget</button>

getTarget1() 将从第一个链接获取 target 值并在 id 为“Target1”的段落标签中显示。setTarget2() 将 link2 的 target 值从默认的 _blank 更改为自定义框架“newframe”。

function getTarget1() {
   var x = document.getElementById("Anchor").target;
   document.getElementById("Target1").innerHTML = x;
}
function setTarget2(){
   document.getElementById("Target1").innerHTML="Target has been set";
   document.getElementById("Anchor2").target="_blank";
}

更新于:2021年2月20日

239 次查看

开启你的职业生涯

完成课程获得认证

开始学习
广告
© . All rights reserved.