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');
}

你可以使用 .attr() 或 prop()（取决于 jQuery 版本）来更改 HTML <input> 元素的按钮文本。 .attr() 和 .prop() 都以 <input> 元素的 value 属性为目标，并根据第二个参数更改其值。

在此示例代码中，第二个参数是 Hide。changeText() 方法还使用 .css() 函数将背景颜色更改为黄色。

上一篇：使用 JavaScript 在网页中创建返回按钮

下一篇：用 JavaScript 检查按钮是否被点击

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

Do you understand JavaScript closures?

发布时间：2025/02/21 浏览次数：108 分类：JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间：2025/02/21 浏览次数：178 分类：JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间：2025/02/21 浏览次数：150 分类：JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

jQuery 中的日期选择器

发布时间：2024/03/24 浏览次数：99 分类：JavaScript

本文将讨论使用 jQuery UI 库的 jQuery 中的 Datepicker。

用 jQuery 检查复选框是否被选中

发布时间：2024/03/24 浏览次数：102 分类：JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

jQuery 中的 $.Ajax 数据类型

发布时间：2024/03/24 浏览次数：133 分类：JavaScript

本教程演示了在 jQuery 中使用 $.ajax 数据类型。

在 jQuery 中检查字符串是否包含子字符串

发布时间：2024/03/24 浏览次数：106 分类：JavaScript

本教程演示了如何在 jQuery 中使用 contains() 方法。

在 jQuery 中检查和取消检查复选框

发布时间：2024/03/24 浏览次数：94 分类：JavaScript

本文演示了如何使用 jQuery 选中和取消选中复选框。

jQuery 中的 Window.onload 与 $(document).ready

发布时间：2024/03/24 浏览次数：180 分类：JavaScript

本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。

迹忆客专注技术分享