有5个按钮,使用css给他们设置背景颜色,如果点击了就把背景颜色设为蓝色,反之为灰色,请给我写个详细完整的例子
时间: 2023-06-04 09:07:42 浏览: 113
好的,这里给您提供一个使用CSS实现按钮点击改变背景颜色的例子:
HTML 代码:
```
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
```
CSS 代码:
```
.btn {
height: 50px;
width: 100px;
background-color: gray;
border: none;
margin: 10px;
cursor: pointer;
}
.btn:hover {
background-color: blue;
}
.btn.active {
background-color: blue;
}
```
Javascript 代码:
```
const btns = document.querySelectorAll('.btn');
btns.forEach((btn) => {
btn.addEventListener('click', () => {
btn.classList.toggle('active');
});
});
```
这里使用了CSS的:hover伪类来实现鼠标悬停时按钮背景色的改变,并使用了.active类来实现按钮点击后背景色的保持。JS代码使用.querySelectorAll从DOM中获取所有的.btn元素,并对每个按钮使用addEventListener添加了一个点击事件,toggle了.active类,来实现点击后背景色的改变。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)