JavaScript 更改按鈕文字

Mehvish Ashiq 2023年1月30日 2022年5月5日
  1. JavaScript 在載入時更改按鈕文字
  2. JavaScript 在滑鼠懸停時更改按鈕文字
  3. JavaScript 單擊時更改按鈕文字
  4. JavaScript 使用 jQuery 更改按鈕文字
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 來實現的,但你必須牢記某些要點。

  1. 由於使用 JavaScript .innerHTML,你可能不得不面對跨站安全攻擊。
  2. JavaScript .innerText 會降低效能,因為它需要有關佈局系統的詳細資訊。
  3. 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() 將事件處理程式附加到給定元素並設定觸發特定事件的方法。

我們使用 mouseovermouseout 事件,.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 屬性為目標,並根據第二個引數更改其值。

在此示例程式碼中,第二個引數是 HidechangeText() 方法還使用 .css() 函式將背景顏色更改為黃色。

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相關文章 - JavaScript Button