JavaScript 更改按鈕文字
我們的目標是通過示例程式碼瞭解 JavaScript 更改按鈕文字。它顯示了按鈕文字在載入、單擊和滑鼠懸停時如何變化。它還舉例說明了使用 jQuery 更改按鈕文字。
JavaScript 在載入時更改按鈕文字
如果你有 HTML <input> 元素，例如 input[type='button'] 或 input[type='submit']，那麼你可以通過以下方式更改按鈕文字。
HTML 程式碼：
<input id="btn" type="button" value="Update">
<input id="btnSubmit" type="submit" value="Update">
JavaScript 程式碼：
document.querySelector('#btn').value = 'Remove';
document.querySelector('#btnSubmit').value = 'Remove';
你還可以使用以下任何給定方法更改 HTML <button> 元素的按鈕文字（給定方法是 .innerHTML、.innerText 和 .textContent）。
HTML 程式碼：
<button id="btn" type="button" value="Show Result">Show Result</button>
<button id="btnSubmit" type="submit" value="Submit Result">Submit Result</button>
JavaScript 程式碼：
// querySelector selects the element whose id's value is btn
document.querySelector('#btn').innerHTML = 'Hide Result';
document.querySelector('#btn').innerText = 'Hide Result';
document.querySelector('#btn').textContent = 'Hide Result';
// querySelector selects the element whose id's value is btnSubmit
document.querySelector('#btnSubmit').innerHTML = 'Hide Result';
document.querySelector('#btnSubmit').innerText = 'Hide Result';
document.querySelector('#btnSubmit').textContent = 'Hide Result';
我們可以為 HTML <input> 元素使用 .innerHTML、.innerText 和 .textContent 嗎？不是。原因是 <input> 是一個空元素，而 <button> 是一個容器標籤並且具有 .innerHTML、.innerText 和 .textContent 屬性。
雖然目標是通過使用 .innerHTML、.innerText 和 .textContent 來實現的，但你必須牢記某些要點。
- 由於使用 JavaScript
.innerHTML，你可能不得不面對跨站安全攻擊。 - JavaScript
.innerText會降低效能，因為它需要有關佈局系統的詳細資訊。 - JavaScript
.textContent不會像.innerHTML那樣引起任何安全問題。它也不必像.innerText那樣解析 HTML 內容，從而獲得最佳效能。
現在，你知道它們之間的區別了。因此，請選擇適合你專案要求的任何這些方法。你可以在此處閱讀更多關於它們的資訊。
JavaScript 在滑鼠懸停時更改按鈕文字
HTML 程式碼：
<button class="button">Hide Result</button>
CSS 程式碼：
.button {
background-color: red;
}
.button:hover {
background-color: green;
}
JavaScript 程式碼：
let btn = document.querySelector('.button');
btn.addEventListener('mouseover', function() {
this.textContent = 'Show Result!';
})
btn.addEventListener('mouseout', function() {
this.textContent = 'Hide Result';
})
上面的程式碼應該顯示一個輸出，當滑鼠指標懸停在按鈕上時，按鈕的文字和顏色會發生變化。
querySelector() 輸出與定義的選擇器匹配的第一個元素。addEventListener() 將事件處理程式附加到給定元素並設定觸發特定事件的方法。
我們使用 mouseover 和 mouseout 事件，.textContent 更改按鈕文字。
JavaScript 單擊時更改按鈕文字
HTML 程式碼：
<input onclick="changeText()" type="button" value="Hide Result" id="btn">
JavaScript 程式碼：
function changeText() {
let element = document.getElementById('btn');
if (element.value == 'Hide Result')
element.value = 'Show Result';
else
element.value = 'Hide Result';
}
當你點選按鈕時，changeText() 執行。此方法使用 getElementById() 獲取與指定選擇器匹配的第一個元素。然後，它檢查元素的值並根據 if-else 語句進行更改。
JavaScript 使用 jQuery 更改按鈕文字
HTML 程式碼：
<!DOCTYPE>
<html>
<head>
<title>Change Text</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<button id="button" onclick="changeText()">Hide Result</button>
</body>
</html>
JavaScript 程式碼：
function changeText() {
$('#button').html('Show Result');
$('#button').css('background-color', 'green');
}
當你單擊按鈕時，上面的程式碼將按鈕的文字從隱藏結果更改為顯示結果，並且還將按鈕的顏色更改為綠色。
.html() 設定所選元素的內容，而 .css() 將 background-color 更改為綠色。請記住，.html() 用於 HTML <button> 元素。
有關這些函式的更多詳細資訊，請檢視 this 連結。
你可能會想，如果我們有 HTML <input> 元素，我們如何使用 jQuery 更改文字？以下程式碼供你理解。
HTML 程式碼：
<!DOCTYPE>
<html>
<head>
<title>Change Text</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<input type="button" id="btnShow" value="Show" onclick="changeText()">
</body>
</html>
JavaScript 程式碼：
function changeText() {
$('#btnShow').attr('value', 'Hide'); // versions older than 1.6
$('#btnShow').prop('value', 'Hide'); // versions newer than 1.6
$('#btnShow').css('background-color', 'yellow');
}
你可以使用 .attr() 或 prop()（取決於 jQuery 版本）來更改 HTML <input> 元素的按鈕文字。 .attr() 和 .prop() 都以 <input> 元素的 value 屬性為目標，並根據第二個引數更改其值。
在此示例程式碼中，第二個引數是 Hide。changeText() 方法還使用 .css() 函式將背景顏色更改為黃色。
