css点击后变颜色

作者：刀剑傲天发布日期:2025-08-29 浏览:44

<!DOCTYPE html>
<html>
<head>
<style>
/* 定义默认状态下按钮的样式 */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

/* 定义点击后按钮的样式 */
.button.clicked {
  background-color: red;
}
</style>
<script>
// 添加点击事件监听器，点击后改变按钮的类名
function changeColor() {
  var button = document.getElementById("myButton");
  button.classList.add("clicked");
}
</script>
</head>
<body>

<!-- 创建一个按钮，并绑定点击事件 -->
<button id="myButton" class="button" onclick="changeColor()">点击我</button>

</body>
</html>

解释说明：

HTML 部分：创建了一个按钮元素，并给它绑定了一个 onclick 事件，当点击按钮时会调用 changeColor() 函数。
CSS 部分：定义了按钮的默认样式（蓝色背景），以及点击后的样式（红色背景）。
JavaScript 部分：通过 changeColor() 函数，在点击按钮后给按钮添加一个 clicked 类，从而触发新的样式。

上一篇：css 设置