首页html点击按钮改变颜色

html点击按钮改变颜色

时间: 2023-10-08 20:13:37 浏览: 172

以下是一个简单的HTML代码示例，其中包含一个按钮，点击按钮时可以改变文本的颜色： ``` <!DOCTYPE html> <html> <head> <title>点击按钮改变颜色</title> <style> .color-change { color: black; background-color: yellow; padding: 10px 20px; border: none; font-size: 16px; cursor: pointer; } .color-change:hover { background-color: orange; } .red { color: red; } </style> </head> <body> <h1 id="heading">这是一个示例文本。</h1> <button onclick="changeColor()">改变颜色</button> <script> function changeColor() { var heading = document.getElementById("heading"); if (heading.classList.contains("red")) { heading.classList.remove("red"); } else { heading.classList.add("red"); } } </script> </body> </html> ``` 在这个示例中，我们首先定义了一个CSS类 `.color-change`，它定义了按钮的样式，包括背景颜色、字体大小、光标样式等等。当鼠标悬停在按钮上时，我们使用 `.color-change:hover` 来定义按钮的背景色。在HTML的 `body` 标签中，我们定义了一个标题元素 `h1`，并给它一个 `id` 为 `heading`。我们还定义了一个按钮元素 `button`，并在其中添加了一个 `onclick` 事件处理函数 `changeColor()`。在这个函数中，我们首先获取标题元素 `heading` 的引用，然后检查它是否已经具有了 `.red` 类。如果有，我们将它从 `heading` 的 `classList` 中删除，以恢复原始的黑色颜色；如果没有，我们将 `.red` 类添加到 `heading` 的 `classList` 中，以将标题的颜色更改为红色。通过这种方式，我们可以很容易地使用JavaScript来更改HTML元素的样式，从而实现点击按钮改变颜色的效果。

阅读全文