資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 在點選按鈕後更改 <a> 標籤的 href 值？
href 屬性指定連結的目標，可以是 URL 或同一文件中的錨點。更改 href 屬性的值允許我們動態更新連結的目標，這在各種情況下都很有用。
通常，<a> 標籤用於在 HTML 中建立超連結。<a> 代表錨標籤，它用於連結其他網頁或指定同一頁面內的確切位置。另一方面，href 屬性用於指定連結的目標，可以是 URL 或同一文件中的錨點。透過將 JavaScript 與 HTML 元素一起使用，我們可以構建互動式應用程式。
在本文中，我們將瞭解如何使用 JavaScript 在點選按鈕後更改錨標籤的 href 值。
使用 Javascript 更改錨標籤的 href 值有多種方法。讓我們討論以下三種方法：
使用 href 屬性
使用 setAttribute() 方法
讓我們詳細討論這三種方法：
方法 1：使用 href 屬性
這是更改錨標籤 href 值的一種方法。此屬性是一個讀寫屬性，允許您獲取或設定 href 屬性的值。它屬於 Anchor href 屬性族。
The following is the syntax for the href property:
此處 URL 指定連結的 URL。
示例
在下面的示例中，我們使用為 href 屬性分配新值來在點選按鈕後更改其值。
<html>
<body>
<h3 id="center">Example for changing href attribute value after clicking the button</h3>
<div id="myDiv">
<a href="https://www.tutorix.com">Welcome to Tutorix Site</a>
<br><br>
<button onclick="sampleFunction()">
click here
</button>
</div>
<script>
function sampleFunction() {
var url = document.querySelector("a");
url.href = 'https://tutorialspoint.tw';
url.textContent = "Hello, Welcome to Tutorialspoint";
}
</script>
</body>
</html>
方法 2：使用 setAttribute() 方法
我們可以使用 setAttribute() 方法更改錨標籤的 href 值。它允許我們為元素設定指定屬性的值。
語法
以下是 setAttribute 方法的語法：
element.setAttribute(name, value)
引數
name - 它表示屬性名稱
value - 它表示新的屬性值
示例
在這些示例中，我們將使用 JavaScript 在點選按鈕後更改錨標籤的 href 屬性：
<html>
<head>
<body>
<h3 id="center">Example for changing href attribute value after clicking the button</h3>
<div id="myDiv">
<a href="https://www.tutorix.com">Welcome to Tutorix Site</a>
<br><br>
<button onclick="sampleFunction()">
click here
</button>
</div>
<script>
function sampleFunction() {
var url = document.querySelector("a");
url.getAttribute("href");
url.setAttribute("href","https://tutorialspoint.tw");
url.textContent = "Hello, Welcome to Tutorialspoint";
}
</script>
</body>
</html>
這裡我們使用了 onclick 事件，該事件僅在使用者點選 Html 元素時發生，它是一個純 JavaScript 屬性。無論何時點選 OnClick 事件，它都會執行某些操作，例如顯示訊息或將使用者重定向到另一個頁面。在網站中應儘量減少使用 OnClick 事件，因為它可能會讓使用者感到困惑。因此，請明智地使用此事件。
這裡我們使用了兩種方法，一種是 setAttribute，另一種是 getAttribute 方法。setAttribute 為元素設定指定屬性的值。getAttribute 用於返回屬性的當前值，如果請求的屬性不存在，則返回 null。這兩個屬性有助於更改錨標籤的 href 屬性值。
在點選按鈕之前，錨標籤顯示的值為“歡迎訪問 Tutorix 網站”，點選按鈕後，其屬性值將更改為“您好，歡迎訪問 Tutorialspoint”。
在本文中，我們演示瞭如何更改 <a> 標籤的 href 屬性值以及示例。我們在這裡看到了兩個不同的示例，在第一個示例中，我們使用了 setAttribute 方法、getAttribute 方法和 onClick 事件來在點選按鈕後更改錨標籤的 href 屬性值。在第二個示例中，我們使用了 innerHTML 屬性、textContent 屬性和 onClick 事件來在點選按鈕後更改錨標籤的 href 屬性值。
9K+ 瀏覽量
