如何在 JavaScript 中创建按钮？

JavaScript 按钮概述

JavaScript 按钮是 JavaScript 元素之一，可以为网页添加效果。JavaScript 按钮使网站看起来更美观。我们可以使用这些 JavaScript 按钮发送和接收数据，触发点击事件，更改文本颜色等等。JavaScript 框架使用 HTML 标签 <button> 定义可点击的按钮。当按钮在网页上渲染时，会触发一个事件来执行功能。我们将使用 HTML 标签和用于 JavaScript 框架的工具 createElement() 来检查如何创建 JavaScript 按钮。

语法

使用 <button> HTML 标签创建 JavaScript 按钮

以上是主要用于 AngularJs、ReactJs 等 JavaScript 框架的语法。

以上是用于构建 JavaScript 按钮的纯 JavaScript 语法。

什么是按钮？

按钮是网页上的一个元素，点击它会执行一个特定的操作。按钮的常见用途包括启动新页面、提交表单以及在当前页面上执行操作。本教程将重点介绍如何使用 HTML 和 JavaScript 创建按钮。

JavaScript 按钮示例

请看下面的示例，了解 JavaScript 按钮是如何创建的。

示例 1

使用 <button> 元素创建 JavaScript 按钮

代码

输出

在上面的示例中，我们使用 HTML <button> 标签和一个 id 来创建一个按钮。由于没有事件处理程序或相关功能，点击将不起作用。

示例 2

您可以为按钮添加点击事件。

代码

输出

在上面的示例中，我们使用 HTML <button> 标签和一个 id 来创建一个按钮。由于没有事件处理程序或相关功能，点击将不起作用。

示例 3

您可以点击按钮来显示文本。

代码

输出

点击按钮前

点击按钮后

示例 4

点击按钮时显示弹出窗口。

代码

输出

点击警报框前

点击警报框后

示例 5

显示日期和时间。

代码

输出

点击按钮前

点击按钮后

可访问性问题

图标按钮

网页上有一些按钮没有名称，只是可点击的图标。这些按钮没有名称，以便于访问。当 HTML 代码被解析时，会构建一个屏幕阅读器可以用来查找页面内容的树。

如果按钮只是一个图标，我们可以通过在按钮内添加文本来为其命名。文本为按钮提供了一个易于理解的名称。屏幕阅读器可以使用此名称进行导航。我们可以通过使用 CSS 属性来隐藏文本的可见性，但仍然可以使用它来提高可访问性。

大小和间距

屏幕上的按钮应该足够大，以便用户能够轻松点击和使用。屏幕尺寸会根据设备而变化。按钮应该足够响应式，以适应所有屏幕尺寸。

如果有一个以上的按钮，它们应该分开，以便用户能够轻松地与它们交互。有时按钮不起作用，因为它们之间的空间不足。

ARIA 状态的详细信息

显示状态信息的按钮是 aria-pressed，这是一个 ARIA 属性。如果按钮用作切换按钮，则使用 aria-pressed。aria-pressed 的值可以是

false：目前没有按下按钮。

true：此时按下了按钮。

mixed：在这种情况下，按钮被视为部分按下。

undefined：按下按钮时，什么都不会发生。

点击和焦点

根据用于渲染 HTML 代码的浏览器，按钮在点击后会获得焦点。当点击或聚焦时，<input> 标签的行为方式相同。

可以为 JavaScript 按钮应用多个事件处理程序，其中一些如下所示：

1. 按下按钮后。
2. 将鼠标光标移到按钮上。
3. 鼠标离开按钮时。
4. 按下按钮提交表单或数据时（POST 方法）。
5. 从源获取信息时（GET 方法）。
6. 移走按钮的焦点。
7. 将焦点集中在按钮上。
8. .disable 用于禁用按钮。
9. 关于切换方法。

总结

现在我们将总结关于如何创建 JavaScript 按钮的讨论。我们已经涵盖了 JS 按钮及其用法。为了方便大家理解，我们还讨论了一些示例以及简洁的解释。我们列出了一些适用于 JavaScript 按钮的事件处理程序方法。我们甚至可以尝试其他事件。因为大多数重要的网页都有具有多种 功能的按钮，所以 JavaScript 按钮可以使页面外观优雅。