使用 JavaScript 更改標籤文字
Mehvish Ashiq
2023年1月30日
2022年5月1日
-
JavaScript 中的
<label>
是什麼 -
使用
.innerHTML
使用 JavaScript 更改標籤文字 -
使用 jQuery 的
.text()
方法使用 JavaScript 更改標籤文字
本教程介紹如何使用 JavaScript 更改標籤文字。我們將使用 .innerHTML
和 jQuery 的 text()
方法來實現本教程的目標。
那麼,讓我們開始吧!
JavaScript 中的 <label>
是什麼
標籤 (<label>
) 是一個 HTML 標籤,我們可以使用它來定義元素的標題或 <input>
元素的文字標籤。你可以在此處找到標籤 (<label>
) 標記的不同用途。
使用 .innerHTML
使用 JavaScript 更改標籤文字
HTML 程式碼:
<!DOCTYPE html>
<html>
<head>
<title>
Change the Text of A label in JavaScript
</title>
</head>
<body>
<label id = "label">
Change this text by clicking on the button
</label>
<br>
<button onclick="changeLabelText()">
Click Here
</button>
</body>
</html>
JavaScript 程式碼:
function changeLabelText() {
document.getElementById('label').innerHTML
= "The text of this label has been changed";
}
輸出(在按下按鈕點選這裡
之前):
輸出(按下按鈕點選這裡
後):
在這裡,我們使用 .innerHTML
屬性並指定在單擊 Click Here
按鈕後顯示的新文字。 .innerHTML
返回 HTML 元素內的字串和駐留在字串內的 HTML/XML 標記,例如空格和換行符等。
我們使用這個屬性來檢視 HTML 元素中的內容——包括任何換行符、間距、格式不規則等。如果文字包含字元 >
、<
或&
,.innerHTML
屬性將作為 HTML 實體返回&`。
我們可以稍微修改一下 JavaScript 程式碼,並在按下按鈕 Click Here
後在舊文字和新文字之間切換。更新後的 JavaScript 程式碼如下:
function changeLabelText() {
var element = document.getElementById("label");
if (element.innerHTML == "Change this text by clicking on the button")
element.innerHTML = "The text of this label has been changed";
else
element.innerHTML = "Change this text by clicking on the button";
}
輸出:
使用 jQuery 的 .text()
方法使用 JavaScript 更改標籤文字
HTML 程式碼:
<!DOCTYPE html>
<html>
<head>
<title>
Change the Text of A label in JavaScript
</title>
</head>
<body>
<label id = "label">
Change this text by clicking on the button
</label>
<br>
<button onclick="changeLabelText()">
Click Here
</button>
</body>
</html>
JavaScript 程式碼:
function changeLabelText() {
var label_text = $('#label').text();
if (label_text === "Change this text by clicking on the button")
$('#label').text("The text of this label has been changed");
else
$('#label').text("Change this text by clicking on the button");
}
輸出:
在這裡,我們使用 jQuery 的 text()
方法獲取文字並將其儲存到 label_text
變數中。此外,我們檢查 label_text
的值和型別,並使用 ===
運算子將其與 Change this text by click on the button
進行比較。
如果是 true
,則將新文字傳遞給 text()
方法;否則,它不是。
Author: Mehvish Ashiq