首页两个按钮点击切换按钮背景色和字体颜色

两个按钮点击切换按钮背景色和字体颜色

时间: 2024-10-03 12:03:10 浏览: 36

当您想要创建一个简单的交互式界面，其中有两个按钮可以互换它们的背景色和字体颜色，通常的做法是在JavaScript或者CSS中设置事件监听器。以下是一个基本的HTML结构和一些示例脚本： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .button { width: 100px; height: 50px; border: none; cursor: pointer; } </style> </head> <body> <button id="button1" class="button">按钮1</button> <button id="button2" class="button">按钮2</button> <script> let button1 = document.getElementById('button1'); let button2 = document.getElementById('button2'); // 初始颜色配置 button1.style.backgroundColor = 'blue'; button1.style.color = 'white'; button2.style.backgroundColor = 'red'; button2.style.color = 'black'; // 点击事件处理函数 function switchColors() { if (button1.classList.contains('active')) { button1.style.backgroundColor = 'red'; button1.style.color = 'white'; button2.style.backgroundColor = 'blue'; button2.style.color = 'black'; button1.classList.remove('active'); button2.classList.add('active'); } else if (button2.classList.contains('active')) { button2.style.backgroundColor = 'red'; button2.style.color = 'white'; button1.style.backgroundColor = 'blue'; button1.style.color = 'black'; button2.classList.remove('active'); button1.classList.add('active'); } } button1.addEventListener('click', () => { switchColors(); }); button2.addEventListener('click', () => { switchColors(); }); </script> </body> </html> ``` 在这个例子中，每个按钮都有一个`active`类用于标记当前激活状态。当一个按钮被点击时，它会改变自身以及另一个按钮的颜色，同时移除自身的`active`类并添加到另一个按钮上。

阅读全文