• 技术文章 >web前端 >js教程

    通过JavaScript在单击按钮后更改<a>标签的href值

    藏色散人藏色散人2021-08-31 10:24:51原创176
    在之前的文章《如何用 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>

    效果如下:

    GIF 2021-8-31 星期二 上午 10-16-44.gif

    第二种方法

    代码如下:

    <!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>

    效果如下:

    GIF 2021-8-31 星期二 上午 10-19-50.gif

    相关介绍:

    通过五种方式选择元素:

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

    以下方法用于操作属性:

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

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

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:JavaScript
    上一篇:一文讲解ajax实现无刷新上传和下载(代码详解) 下一篇:聊聊Node.js Buffer中的encoding(编码)
    线上培训班

    相关文章推荐

    • JavaScript如何实现点击删除扩展名并获取文件名• 浅析JavaScript中时间戳运算的方法(附代码)• JavaScript限制输入框只允许整数和小数点(两种方法)• 使用JavaScript从数组中删除最后一项(3种方法)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网