HTML 点击更改按钮颜色

在本文中，我们将介绍如何使用HTML来编写代码，通过点击按钮来改变按钮的颜色。

阅读更多：HTML 教程

HTML基础知识

HTML是一种用于创建网页的标记语言。它由一系列的标签组成，标签用来定义网页的结构和内容。在这里，我们将使用一些常见的HTML标签来实现按钮颜色的改变。

HTML按钮元素

在HTML中，通过使用<button>标签可以创建一个按钮。按钮是用户可以点击的交互元素。以下是创建一个按钮的示例代码：

<button>Click Me</button>

CSS样式

要改变按钮的颜色，我们需要使用CSS来设置按钮的样式。CSS是一种用于控制网页布局和外观的样式表语言。

通过为按钮添加style属性，我们可以使用CSS来设置按钮的颜色。以下是一个示例代码：

<button style="background-color: blue; color: white;">Click Me</button>

在上面的示例中，background-color属性用于设置按钮的背景颜色，color属性用于设置按钮的文本颜色。

JavaScript事件处理

要实现点击按钮后改变按钮的颜色，我们需要使用JavaScript来处理按钮的点击事件。

首先，我们需要给按钮添加一个onclick属性，并将其设置为一个JavaScript函数。该函数将在按钮被点击时执行。

以下是一个示例代码：

<button onclick="changeColor()">Click Me</button>

<script>
function changeColor() {
  var button = document.getElementsByTagName("button")[0];
  button.style.backgroundColor = "red";
}
</script>

在上面的示例中，当按钮被点击时，changeColor函数将被调用。该函数通过选择按钮元素并使用JavaScript来改变其backgroundColor属性的值，实现按钮颜色的改变。

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <style>
    .button {
      background-color: blue;
      color: white;
    }
  </style>
</head>
<body>
  <button onclick="changeColor()">Click Me</button>

  <script>
    function changeColor() {
      var button = document.getElementsByTagName("button")[0];
      button.style.backgroundColor = "red";
    }
  </script>
</body>
</html>