溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“如何通過JavaScript在單擊按鈕后更改<a>標簽的href值”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何通過JavaScript在單擊按鈕后更改<a>標簽的href值”這篇文章吧。
下面介紹兩種實現方法：
第一種方法
代碼如下：
<!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()">
點擊更改跳轉鏈接
</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()">
點擊更改跳轉鏈接
</button>
<script type="text/javascript">
function myFunction() {
document.getElementById('myLink').href
="https://www.php.cn";
document.getElementById("myLink")
.textContent = "歡迎來到億速云！";
}
</script>
</body>
</html>相關介紹：
通過五種方式選擇元素：
document.querySelector() 方法：它返回與查詢匹配的第一個元素。
document.querySelectorAll() 方法：它返回與查詢匹配的所有元素。
document.getElementById() 方法：它返回與 id 匹配的一個元素。
document.getElementsByClassName() 方法：返回與類匹配的所有元素。
document.getElementsByTagName() 方法：它返回與標簽名稱匹配的元素列表。
DOM 允許屬性操作。屬性控制 HTML 標記的行為或提供有關標記的附加信息。JavaScript 提供了多種操作 HTML 元素屬性的方法。
以下方法用于操作屬性：
getAttribute() 方法：它返回元素上某個屬性的當前值，如果元素上不存在指定的屬性，則返回 null。
setAttribute() 方法：它更新指定元素上現有屬性的值，否則添加具有指定名稱和值的新屬性。
removeAttribute() 方法：用于移除指定元素的屬性。
以上是“如何通過JavaScript在單擊按鈕后更改<a>標簽的href值”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
