在之前的文章《如何用 jQuery 为段落元素设置动画》中给大家介绍了怎么用 jQuery 为段落元素设置动画，感兴趣的朋友可以去阅读了解一下~

本文将给大家介绍怎么通过JavaScript在单击按钮后更改<a>标签的href值。

在我们日常开发过程中难免会遇到这类要求，所以就不要错过本文啦~

下面介绍两种实现方法：

第一种方法

代码如下：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

</head>

<body style="text-align:center;">

<h1 style="color:#ff311f">
    PHP中文网
</h1>

<h3>
    更改href属性值
</h3>

<a href="https://www.baidu.com/">
    Go to 百度！
</a>

<br><br>

<button onclick="myFunction()">
    点击更改跳转链接
</button>

<script type="text/javascript">
    function myFunction() {
        var link = document.querySelector("a");
        link.getAttribute("href");
        link.setAttribute("href",
            "https://www.php.cn/");
        link.textContent = "欢迎来到PHP中文网！";
    }
</script>
</body>

</html>

效果如下:

第二种方法

代码如下：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

</head>

<body style="text-align:center;">

<h1 style="color:#ff7a03">
    PHP中文网
</h1>

<h3>
    更改href属性值
</h3>

<a href="https://www.baidu.com" id="myLink">
    Go to 百度
</a>

<br><br>

<button onclick="myFunction()">
    点击更改跳转链接
</button>

<script type="text/javascript">
    function myFunction() {
        document.getElementById('myLink').href
            ="https://www.php.cn";

        document.getElementById("myLink")
            .textContent = "欢迎来到PHP中文网！";
    }
</script>
</body>

</html>

效果如下：

相关介绍：

通过五种方式选择元素：

  • document.querySelector() 方法：它返回与查询匹配的第一个元素。

  • document.querySelectorAll() 方法：它返回与查询匹配的所有元素。

  • document.getElementById() 方法：它返回与 id 匹配的一个元素。

  • document.getElementsByClassName() 方法：返回与类匹配的所有元素。

  • document.getElementsByTagName() 方法：它返回与标签名称匹配的元素列表。

DOM 允许属性操作。属性控制 HTML 标记的行为或提供有关标记的附加信息。JavaScript 提供了多种操作 HTML 元素属性的方法。

以下方法用于操作属性：

  • getAttribute() 方法：它返回元素上某个属性的当前值，如果元素上不存在指定的属性，则返回 null。

  • setAttribute() 方法：它更新指定元素上现有属性的值，否则添加具有指定名称和值的新属性。

  • removeAttribute() 方法：用于移除指定元素的属性。

最后给大家推荐《JavaScript基础教程》~欢迎大家学习~

以上就是通过JavaScript在单击按钮后更改<a>标签的href值的详细内容，更多请关注其它相关文章！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。