将 CSS 类添加到按钮 JavaScript

在 Web 开发中，使用 CSS 类来控制样式非常常见。而在 JavaScript 中，添加 CSS 类就是一种常见的操作。本文将介绍如何使用 JavaScript 将 CSS 类添加到按钮。

HTML

首先，我们需要一个按钮元素，可以使用以下 HTML 代码创建一个简单的按钮。

<button id="myButton">Click me</button>

JavaScript

下面是一个使用 JavaScript 将 CSS 类添加到按钮的示例代码。

// 获取按钮元素
var myButton = document.getElementById('myButton');

// 添加 CSS 类
myButton.classList.add('my-class');

以上代码中，我们首先使用 getElementById 方法获取了按钮元素，并将其存储在变量 myButton 中。接下来，我们使用 classList 属性的 add 方法将 CSS 类 my-class 添加到该按钮上。

CSS

最后，我们需要在 CSS 文件中定义 CSS 类 my-class 的样式。可以像下面这样编写 CSS 代码。

.my-class {
  background-color: #ff0000;
  color: #fff;
  font-weight: bold;
}

以上代码将使按钮的背景颜色变为红色，文本颜色为白色，并加粗文本。

结论

使用 JavaScript 将 CSS 类添加到按钮是一种常见的操作，可以帮助我们控制按钮的样式。以上是一个简单的示例，你可以将其应用到你的项目中。