首页html点击按钮之后改变颜色和文字再次点击会变回去

html点击按钮之后改变颜色和文字再次点击会变回去

时间: 2024-12-09 08:18:39 浏览: 23

在HTML中，你可以通过JavaScript或者jQuery来实现这样的效果。这里是一个基本的例子，使用纯JavaScript： ```html <!DOCTYPE html> <html lang="en"> <head> <title>Button Color Change</title> <style> .default { background-color: lightblue; color: white; } .clicked { background-color: lightgreen; color: black; } </style> </head> <body> <button id="myButton" class="default">点击我</button> <script> document.getElementById("myButton").addEventListener("click", function() { this.className = this.className === "default" ? "clicked" : "default"; }); </script> </body> </html> ``` 在这个例子中，我们有一个按钮（id="myButton"），默认样式设置为浅蓝色背景和白色文本。当用户点击按钮时，事件监听器检测这个变化，如果当前的类名是"default"，就切换到"clicked"，反之亦然。这样每次点击都会改变按钮的颜色和文字。

阅读全文