JavaScript経由でボタンをクリックした後に<a>タグのhref値を変更する-jsチュートリアル-php.cn

JavaScript経由でボタンをクリックした後にタグのhref値を変更する

藏色散人

リリース： 2021-08-31 10:24:51

オリジナル

2547 人が閲覧しました

前の記事「jQuery を使用して段落要素をアニメーション化する方法」では、jQuery を使用して段落要素をアニメーション化する方法を紹介しました。興味のある方は読んで詳細をご覧ください~

Thisこの記事では、JavaScript を使用してボタンをクリックした後にタグの href 値を変更する方法を紹介します。

日常の開発プロセスでは、このような要件に必ず遭遇します。そのため、この記事をお見逃しなく~

次の 2 つの実装方法:

最初の方法

コードは次のとおりです:

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

2 番目の方法

コードは次のとおりです:

<!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(&#39;myLink&#39;).href
            ="https://www.php.cn";

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

</html>

ログイン後にコピー

効果は次のとおりです:

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