用js实现盒子div,里放三个子元素盒子,并形成一个列表
时间: 2023-06-02 18:05:52 浏览: 59
好的,这个问题属于技术问题,我可以帮您解答。以下是一个用JS实现的盒子div,里面放三个子元素盒子,并形成一个列表的代码示例:
HTML代码:
```
<div id="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
```
CSS代码:
```
#container {
display: flex;
flex-direction: column;
}
.box {
width: 100%;
height: 100px;
background-color: gray;
margin-bottom: 10px;
}
```
JS代码:
```
var container = document.getElementById("container");
var boxes = container.querySelectorAll(".box");
// 增加样式
boxes.forEach(function(box) {
box.style.backgroundColor = getRandomColor();
});
// 随机生成颜色
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
```
以上代码实现了一个包含3个子元素盒子的列表,每个子元素盒子的背景颜色都是随机的。您可以根据自己的需要进一步修改样式和JS代码。