1. DOM操作题,点击更换颜色的按钮时,“随机”更改div中的颜色
时间: 2024-02-20 09:00:04 浏览: 27
可以使用JavaScript来实现这个效果。首先,需要获取到要更改颜色的div元素和更换颜色的按钮元素。然后,给按钮元素添加一个点击事件监听器,当按钮被点击时,随机生成一个颜色值,并把这个颜色值赋给div元素的背景颜色。
以下是一个可能的实现:
HTML代码:
```
<div id="myDiv">这是一个要更改颜色的div</div>
<button id="changeColorBtn">更换颜色</button>
```
JavaScript代码:
```
// 获取要操作的元素
var divEl = document.getElementById('myDiv');
var btnEl = document.getElementById('changeColorBtn');
// 给按钮添加点击事件监听器
btnEl.addEventListener('click', function() {
// 随机生成一个RGB颜色值
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var color = 'rgb(' + r + ',' + g + ',' + b + ')';
// 把颜色值赋给div元素的背景颜色
divEl.style.backgroundColor = color;
});
```
这样,每次点击按钮时,都会随机更换div的背景颜色。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)