极客笔记JavaScript 如何在单击按钮后更改<a>标签的href值
href 属性指定链接的目标，可以是URL或同一文档中的锚点。通过更改href属性的值，我们可以动态更新链接的目标，这在各种情况下都很有用。
通常，<a>标签用于在HTML中创建超链接。<a>代表锚点标签，它用于链接其他网页或指定同一页面中的确切位置。另外，href属性用于指定链接的目标，可以是URL或同一文档中的锚点。通过在HTML元素中使用JavaScript，我们可以构建交互应用程序。
在本文中，我们将展示如何使用JavaScript在单击按钮后更改锚点的href值。
使用JavaScript可以通过几种方法更改锚点的href值。下面讨论三种方法：
- 使用href属性
-
使用setAttribute()方法
让我们详细讨论这2种方法：
方法1：使用href属性
这是一种更改锚点href值的方式。该属性是一个可读写属性，允许您获取或设置href属性的值。它属于锚点href属性系列。
The following is the syntax for the href property:
这里URL指定链接的URL。
示例
在下面的示例中，我们在点击按钮后使用assign新值给href属性来改变其值。
<html>
<body>
<h3 id="center">Example for changing href attribute value after clicking the button</h3>
<div id="myDiv">
<a href="https://www.tutorix.com">Welcome to Tutorix Site</a>
<br><br>
<button onclick="sampleFunction()">
click here
</button>
</div>
<script>
function sampleFunction() {
var url = document.querySelector("a");
url.href = 'https://www.tutorialspoint.com';
url.textContent = "Hello, Welcome to Tutorialspoint";
}
</script>
</body>
</html>
方法2：使用setAttribute()方法的
我们可以通过使用setAttribute()方法来改变锚点标签的href值。它允许我们为元素设置指定属性的值。
语法
以下是setAttribute方法的语法 –
element.setAttribute(name, value)
参数
- name − 表示属性名
-
value − 表示新的属性值
示例
在这个示例中，我们将使用JavaScript在单击按钮后更改锚点标签的href属性。
<html>
<head>
<body>
<h3 id="center">Example for changing href attribute value after clicking the button</h3>
<div id="myDiv">
<a href="https://www.tutorix.com">Welcome to Tutorix Site</a>
<br><br>
<button onclick="sampleFunction()">
click here
</button>
</div>
<script>
function sampleFunction() {
var url = document.querySelector("a");
url.getAttribute("href");
url.setAttribute("href","https://www.tutorialspoint.com");
url.textContent = "Hello, Welcome to Tutorialspoint";
}
</script>
</body>
</html>
在这里，我们使用了onclick事件，它仅在用户单击HTML元素时发生，并且是一种纯粹的JavaScript属性。每当您单击OnClick事件时，它会执行一些操作，例如显示一条消息或将用户重定向到另一个页面。OnClick事件在网站上的使用次数必须非常少，因为它可能会给用户带来困惑。因此，请明智地使用这些事件。
在这里，我们使用了两种方法，一种是setAttribute方法，另一种是getAttribute方法。setAttribute方法用于为元素设置指定属性的值。getAttribute用于返回属性的当前值，如果请求的属性不存在，则返回null。这两个属性有助于更改锚标签的href属性值。
在我们单击按钮之前，锚标签显示的值为“Welcome to Tutorix Site”，一旦我们单击按钮，它会将属性值更改为“Hello, Welcome to Tutorialspoint”。
在本文中，我们演示了如何改变<a>标签的href属性值，并提供了示例。我们在这里看到了两个不同的示例，在第一个示例中，我们使用了setAttribute方法、getAttribute方法和onClick事件，在单击按钮后更改锚标签的href属性值。在第二个示例中，我们使用了innerHTML属性、textContent属性和onClick事件，在单击按钮后更改锚标签的href属性值。