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()
函式將背景顏色更改為黃色。