首頁 > 文章 > web前端 > 透過JavaScript在點擊按鈕後變更標籤的href值

透過JavaScript在點擊按鈕後變更 標籤的href值

藏色散人原創: 2021-08-31 10:23:222451瀏覽

在之前的文章《如何用jQuery 為段落元素設定動畫》中給大家介紹了怎麼用jQuery 為段落元素設定動畫，有興趣的朋友可以去閱讀了解一下~

本文將介紹給大家怎麼透過JavaScript在點擊按鈕後更改3499910bf9dac5ae3c52d5ede7383485標籤的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(&#39;myLink&#39;).href
            ="https://www.php.cn";

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

</html>

效果如下：

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

#相關介紹：

透過五種方式選擇元素：

document.querySelector() 方法：它傳回與查詢相符的第一個元素。
document.querySelectorAll() 方法：它傳回與查詢相符的所有元素。
document.getElementById() 方法：它傳回與 id 相符的一個元素。
document.getElementsByClassName() 方法：傳回與類別相符的所有元素。
document.getElementsByTagName() 方法：它傳回與標籤名稱相符的元素清單。

DOM 允許屬性操作。屬性控制 HTML 標記的行為或提供有關標記的附加資訊。 JavaScript 提供了多種操作 HTML 元素屬性的方法。

以下方法用於操作屬性：

getAttribute() 方法：它會傳回元素上某個屬性的目前值，如果元素上不存在指定的屬性，則傳回null。
setAttribute() 方法：它更新指定元素上現有屬性的值，否則新增具有指定名稱和值的新屬性。
removeAttribute() 方法：用於移除指定元素的屬性。

最後推薦給大家推薦《

JavaScript基礎教學#」~歡迎大家學習~

以上是透過JavaScript在點擊按鈕後變更標籤的href值的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript jquery html NULL dom href

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：一文講解ajax實現無刷新上傳和下載（程式碼詳解）下一篇：一文講解ajax實現無刷新上傳和下載（程式碼詳解）

看更多