HOWTO · JavaScript
JavaScript 更改按钮文本
本教程展示了如何使用 JavaScript 更改按钮文本，并演示了使用 jQuery 更改按钮文本。
本页内容
要用 JavaScript 更改按钮文字，请对 <input type="button"> 或 <input type="submit"> 设置 value，对 <button> 设置 textContent。可以在页面初始化时设置，也可以在悬停或点击事件处理程序中设置。jQuery 提供了对应的 .val() 和 .text() 方法。
下方的浏览器示例是尚未执行的页面源码，没有记录的运行输出。将每个 HTML 示例分别保存为一个文件，即可在浏览器中尝试相应的交互。
JavaScript 在页面加载时更改按钮文字
将脚本放在这些元素之后，确保 JavaScript 选择它们之前，元素已经存在。页面初始化时，会把两个 input 按钮的标签从 Update 改为 Remove，并把两个 button 的标签改为 Hide Result：
本节中的代码以及显示的标签或输出仍为英文。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change labels on load</title>
</head>
<body>
<input id="loadInput" type="button" value="Update">
<input id="loadSubmit" type="submit" value="Update">
<button id="loadButton" type="button">Show Result</button>
<button id="loadSubmitButton" type="submit">Submit Result</button>
<script>
document.querySelector('#loadInput').value = 'Remove';
document.querySelector('#loadSubmit').value = 'Remove';
document.querySelector('#loadButton').textContent = 'Hide Result';
document.querySelector('#loadSubmitButton').textContent = 'Hide Result';
</script>
</body>
</html>
<input> 是空元素，没有子内容；它显示的按钮标签来自 value。虽然它继承了与文本相关的 DOM 属性，但设置这些属性不会改变显示的标签。<button> 显示的是其子内容；它的 value 用途不同，例如可以用于提交表单数据。
要设置普通按钮标签，textContent 会插入纯文本。innerText 处理的是渲染后的文本，并受样式影响；读取它可能需要进行布局计算。innerHTML 会解析 HTML 标记，因此插入不可信字符串可能带来注入漏洞。这两个文本属性都不会把赋给它们的字符串解析为 HTML，但这并不意味着任何用法都绝对安全，也不意味着它们总是最快。有关这些属性的更多背景，请参阅现有的属性对比。
替换按钮的整个 textContent 也会移除它的子元素。如果按钮中包含图标，可以把标签放在单独的 <span> 中，并只更新该 span。
如果将脚本移到文档的 head 中，请使用带 defer 的外部脚本，或等待 DOMContentLoaded 事件。querySelector() 会返回第一个匹配项；若没有匹配元素，则返回 null。如果赋值没有生效，请检查选择器和脚本执行时机。
JavaScript 在鼠标悬停时更改按钮文字
使用 mouseover 在指针移入时更改标签，并使用 mouseout 恢复原标签。背景从红色变为绿色的效果由 CSS 处理：
本节中的代码以及显示的标签或输出仍为英文。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change a label on hover</title>
<style>
#hoverButton { background-color: red; }
#hoverButton:hover { background-color: green; }
</style>
</head>
<body>
<button id="hoverButton" type="button">Hide Result</button>
<script>
const hoverButton = document.querySelector('#hoverButton');
hoverButton.addEventListener('mouseover', function () {
this.textContent = 'Show Result!';
});
hoverButton.addEventListener('mouseout', function () {
this.textContent = 'Hide Result';
});
</script>
</body>
</html>
addEventListener() 用于注册回调函数，本身不会触发事件。在这里使用的普通函数回调中，this 指向注册了监听器的按钮。初始标签是 Hide Result，悬停时显示的标签是 Show Result!。本节示例中的代码和显示标签保持原样，因此标签仍为英文。
在元素与其后代之间移动时，这些事件也可能触发。如果按钮包含嵌套内容，可以考虑使用 mouseenter 和 mouseleave。悬停操作依赖指针设备，因此应确保不悬停时也能看到重要说明。
JavaScript 在点击时更改按钮文字
这个 input 按钮的初始标签是 Hide Result。点击处理程序通过唯一 ID 选中元素，并在 Show Result 和 Hide Result 之间切换其 value：
本节中的代码以及显示的标签或输出仍为英文。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Toggle a button label</title>
</head>
<body>
<input id="clickInput" type="button" value="Hide Result">
<script>
function nextButtonText(currentText) {
return currentText === 'Hide Result' ? 'Show Result' : 'Hide Result';
}
function changeText() {
const element = document.getElementById('clickInput');
element.value = nextButtonText(element.value);
}
document.getElementById('clickInput').addEventListener('click', changeText);
</script>
</body>
</html>
getElementById() 接收不带 CSS # 前缀的 ID 字符串。处理程序使用严格相等比较来选择下一个标签。对于 <button>，应改为读取并设置 textContent。单独更改标签不会显示或隐藏结果内容；如有需要，应另外添加相应行为。
下面的独立 JavaScript 示例使用 Node.js 演示同一个标签选择函数。已有记录显示，该函数运行后产生了下方所示的输出：
function nextButtonText(currentText) {
return currentText === 'Hide Result' ? 'Show Result' : 'Hide Result';
}
let label = 'Hide Result';
label = nextButtonText(label);
console.log(label);
label = nextButtonText(label);
console.log(label);
Show Result
Hide Result
这次执行只测试了独立的标签选择函数。浏览器 DOM 事件和 jQuery 交互仍未执行。
使用 jQuery 更改 JavaScript 按钮文字
对 <button> 使用 .text()，对 input 按钮使用 .val()。这个尚未执行的浏览器示例要求先加载 jQuery，再注册事件处理程序。示例保留了源文章中的 jQuery 1.7.1 CDN URL 作为演示依赖；这里没有检查该 URL 和版本是否可用，或是否适合你的项目。
本节中的代码以及显示的标签或输出仍为英文。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change labels with jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<button id="jqueryButton" type="button">Hide Result</button>
<input id="jqueryInput" type="button" value="Show">
<script>
$('#jqueryButton').on('click', function () {
$(this).text('Show Result').css('background-color', 'green');
});
$('#jqueryInput').on('click', function () {
$(this).val('Hide').css('background-color', 'yellow');
});
</script>
</body>
</html>
点击 button 会将其文字设为 Show Result，并把背景设为绿色。点击 input 会将其标签设为 Hide，并把背景设为黄色。这些处理程序设置的是固定标签，而不是在标签之间切换。.css() 只改变外观，不会更改标签。
.html() 也可以替换按钮内容，但它会解析标记；如果只需要设置文本标签，请使用 .text()。.val() 直接表达了设置 input 按钮标签的用途，不需要冗余地调用 .attr() 和 .prop()，也不必处理依赖版本的替代写法。现有的 jQuery HTML 和 CSS 方法参考提供了更多背景信息。
