HTML - DOM href 属性

HTML DOM 的href 属性用于获取（检索）或设置（更新）HTML 中锚点（<a>）元素的源 URL。

它返回锚点链接到的当前 URL，并且在修改时，它会更新锚点的 href 属性，允许您动态更改链接目标。

语法

以下是 HTML DOM 的href（获取 href 属性）属性的语法：

anchorObject.href

要更新（设置）href 属性，请使用以下语法：

anchorObject.href = new_url

参数

由于它是一个属性，因此不接受任何参数。

返回值

此属性将锚元素的当前 URL 作为字符串返回。

示例 1：检索锚点 (“a”) 元素的 URL

以下是 HTML DOM href 属性的基本示例。它返回锚元素的当前 URL：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM href</title>
</head>
<body>
<p>URL of the current link will be displayed below:-</p>
<span>MyLink: </span>
<a href="https://tutorialspoint.com/" id="my_link" target="_blank">Welcome to Tutorialspoint</a>
<p>The URL of the above Link: </p><span id="result"></span>
<script>
      let my_url = document.getElementById("my_link");
      document.getElementById("result").innerHTML = my_url.href;
</script>
</body>
</html>

示例 2：更新锚点 (“a”) 元素的 URL

这是使用 HTML DOM href 属性的另一个示例。我们使用此属性更改锚元素的当前 URL：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM href</title>
</head>
<body>
<p>Click the button to update the URL of the below link:-</p>
<span>MyLink: </span>
<a href="https://tutorialspoint.com/" id="my_link" target="_blank">Click me</a>
<button id="update_btn">Update URL</button>
<p id="result"></p>
<span id="new"></span>
<script>
      document.getElementById("update_btn").addEventListener("click", ()=>{
         let my_url = document.getElementById("my_link");
         document.getElementById("result").innerHTML = "URL has been updated click the above link to verify";
         my_url.href = "https://tutorialspoint.com/html/index.htm";
         document.getElementById("new").innerHTML = "Updated URL: " + my_url.href;
      });
</script>
</body>
</html>

支持的浏览器

属性
值	是	是	是	是	是

打印页面

上一个

下一个