使用 JavaScript 更改標籤文字
Mehvish Ashiq
2023年10月12日
JavaScript
JavaScript Label
-
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() 方法；否則，它不是。
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe
作者： Mehvish Ashiq
