JavaScript 更改按钮文本

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript 更改按钮文本

作者：迹忆客最近更新：2024/03/18 浏览次数：

我们的目标是通过示例代码了解 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');
}