如何通過JavaScript在單擊按鈕后更改<a>標(biāo)簽的href值

發(fā)布時(shí)間：2021-08-31 10:35:24 來源：億速云閱讀：130 作者：小新欄目：web開發(fā)

這篇文章主要為大家展示了“如何通過JavaScript在單擊按鈕后更改<a>標(biāo)簽的href值”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何通過JavaScript在單擊按鈕后更改<a>標(biāo)簽的href值”這篇文章吧。

下面介紹兩種實(shí)現(xiàn)方法：

第一種方法

代碼如下：

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

</head>

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

<h2 style="color:#ff311f">
    億速云
</h2>

<h4>
    更改href屬性值
</h4>

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

<br><br>

<button onclick="myFunction()">
    點(diǎn)擊更改跳轉(zhuǎn)鏈接
</button>

<script type="text/javascript">
    function myFunction() {
        var link = document.querySelector("a");
        link.getAttribute("href");
        link.setAttribute("href",
            "");
        link.textContent = "歡迎來到億速云！";
    }
</script>
</body>

</html>

第二種方法

代碼如下：

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

</head>

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

<h2 style="color:#ff7a03">
    億速云
</h2>

<h4>
    更改href屬性值
</h4>

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

<br><br>

<button onclick="myFunction()">
    點(diǎn)擊更改跳轉(zhuǎn)鏈接
</button>

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

        document.getElementById("myLink")
            .textContent = "歡迎來到億速云！";
    }
</script>
</body>

</html>

相關(guān)介紹：

通過五種方式選擇元素：

document.querySelector() 方法：它返回與查詢匹配的第一個(gè)元素。
document.querySelectorAll() 方法：它返回與查詢匹配的所有元素。
document.getElementById() 方法：它返回與 id 匹配的一個(gè)元素。
document.getElementsByClassName() 方法：返回與類匹配的所有元素。
document.getElementsByTagName() 方法：它返回與標(biāo)簽名稱匹配的元素列表。

DOM 允許屬性操作。屬性控制 HTML 標(biāo)記的行為或提供有關(guān)標(biāo)記的附加信息。JavaScript 提供了多種操作 HTML 元素屬性的方法。

以下方法用于操作屬性：

getAttribute() 方法：它返回元素上某個(gè)屬性的當(dāng)前值，如果元素上不存在指定的屬性，則返回 null。
setAttribute() 方法：它更新指定元素上現(xiàn)有屬性的值，否則添加具有指定名稱和值的新屬性。
removeAttribute() 方法：用于移除指定元素的屬性。

以上是“如何通過JavaScript在單擊按鈕后更改<a>標(biāo)簽的href值”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

如何通過JavaScript在單擊按鈕后更改<a>標(biāo)簽的href值

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽