HTML DOM 锚点 target 属性
htmlweb developmentfront end technology更新于 2024/6/11 17:16:17
与锚点标签 (<a>) 关联的 HTML DOM target 属性指定点击 URL 后新网页的打开位置。它可以具有以下值 −
- _blank − 这将在新窗口中打开链接的文档。
- _parent − 这将在父框架集中打开链接的文档。
- _top − 这将在完整正文窗口中打开链接的文档。
- _self − 这将在同一窗口中打开链接的文档。这是默认行为
- framename − 这将在指定的框架名称中打开链接的文档。
语法
以下是语法 −
返回目标属性 −
anchorObject.target
设置目标属性 −
anchorObject.target = "_blank|_self|_parent|_top|framename"
示例
让我们看一个锚点目标属性的示例 −
<!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>
输出
这将产生以下输出 −
点击"获取目标"按钮后 −
点击"设置目标"按钮后 −
在上面的例子中 −
我们取了一个带有 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() 将从第一个链接获取目标值，并将其显示在 id=”Target1” 的段落标签中。setTarget2() 会将链接 2 的目标值从默认的 _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";
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
