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() 函数将背景颜色更改为黄色。
