首页Html点击按钮改变背景颜色

Html点击按钮改变背景颜色

时间: 2024-11-12 15:38:38 浏览: 25

在HTML中，你可以通过JavaScript来实现按钮点击后改变页面元素的背景颜色。这里是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <title>Button Click Change Color</title> <style> .btn { padding: 10px 20px; background-color: #ccc; color: black; border: none; cursor: pointer; } </style> </head> <body> <button id="colorBtn" class="btn">点击我改变背景色</button> <script> document.getElementById('colorBtn').addEventListener('click', function() { // 当按钮被点击时，会执行这个函数 var currentColor = this.style.backgroundColor; // 获取当前背景颜色 var newColor = (currentColor === 'lightgray') ? 'blue' : 'lightgray'; // 如果是浅灰色，则改为蓝色；反之则改为浅灰色 this.style.backgroundColor = newColor; // 更新背景颜色 }); </script> </body> </html> ``` 在这个例子中，当用户点击id为`colorBtn`的按钮时，背景颜色会在浅灰色（#ccc）和蓝色（blue）之间切换。

阅读全文