数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 JavaScript 在点击按钮后更改 <a> 标签的 href 值？
href 属性指定链接的目标，可以是 URL 或同一文档中的锚点。更改 href 属性的值允许我们动态更新链接的目标，这在各种情况下都很有用。
通常，<a> 标签用于在 HTML 中创建超链接。<a> 代表锚标签，它用于链接其他网页或指定同一页面内的确切位置。另一方面，href 属性用于指定链接的目标，可以是 URL 或同一文档中的锚点。通过将 JavaScript 与 HTML 元素一起使用，我们可以构建交互式应用程序。
在本文中，我们将了解如何使用 JavaScript 在点击按钮后更改锚标签的 href 值。
使用 Javascript 更改锚标签的 href 值有多种方法。让我们讨论以下三种方法：
使用 href 属性
使用 setAttribute() 方法
让我们详细讨论这三种方法：
方法 1：使用 href 属性
这是更改锚标签 href 值的一种方法。此属性是一个读写属性，允许您获取或设置 href 属性的值。它属于 Anchor href 属性族。
The following is the syntax for the href property:
此处 URL 指定链接的 URL。
示例
在下面的示例中，我们使用为 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://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://tutorialspoint.com");
url.textContent = "Hello, Welcome to Tutorialspoint";
}
</script>
</body>
</html>
这里我们使用了 onclick 事件，该事件仅在用户点击 Html 元素时发生，它是一个纯 JavaScript 属性。无论何时点击 OnClick 事件，它都会执行某些操作，例如显示消息或将用户重定向到另一个页面。在网站中应尽量减少使用 OnClick 事件，因为它可能会让用户感到困惑。因此，请明智地使用此事件。
这里我们使用了两种方法，一种是 setAttribute，另一种是 getAttribute 方法。setAttribute 为元素设置指定属性的值。getAttribute 用于返回属性的当前值，如果请求的属性不存在，则返回 null。这两个属性有助于更改锚标签的 href 属性值。
在点击按钮之前，锚标签显示的值为“欢迎访问 Tutorix 网站”，点击按钮后，其属性值将更改为“您好，欢迎访问 Tutorialspoint”。
在本文中，我们演示了如何更改 <a> 标签的 href 属性值以及示例。我们在这里看到了两个不同的示例，在第一个示例中，我们使用了 setAttribute 方法、getAttribute 方法和 onClick 事件来在点击按钮后更改锚标签的 href 属性值。在第二个示例中，我们使用了 innerHTML 属性、textContent 属性和 onClick 事件来在点击按钮后更改锚标签的 href 属性值。
9K+ 浏览量
