用js实现盒子div,里放三个子元素盒子,并形成一个列表,单击第一个按钮,向盒子添加一个子元素到盒子最后
时间: 2023-06-02 12:06:04 浏览: 60
很高兴为您提供帮助!以下是可以实现您所描述的盒子div列表的js代码。请注意,这仅是一个示例代码,您可以根据您的实际需求进行修改。
HTML代码:
```
<div id="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<button id="add-btn">添加子元素</button>
```
JS代码:
```
var container = document.getElementById("container");
var addBtn = document.getElementById("add-btn");
// 单击按钮时添加一个子元素到盒子最后
addBtn.addEventListener("click", function() {
var newItem = document.createElement("div");
newItem.classList.add("item");
newItem.innerHTML = "New Item";
container.appendChild(newItem);
});
```
当然,您也可以通过CSS样式来控制这些盒子的外观和布局。希望这能帮助到您!
相关问题
用js实现盒子div,里放三个子元素盒子,并形成一个列表
好的,这个问题属于技术问题,我可以帮您解答。以下是一个用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代码。
父盒子flex为1,用flex布局实现第一行两个子盒子,第二行三个子盒子
可以这样实现:
HTML代码:
```html
<div class="parent">
<div class="row1">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="row2">
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
</div>
```
CSS代码:
```css
.parent {
display: flex;
flex-direction: column;
flex: 1;
}
.row1 {
display: flex;
flex-direction: row;
}
.row2 {
display: flex;
flex-direction: row;
}
.box1 {
flex: 1;
height: 100px;
background-color: red;
}
.box2 {
flex: 1;
height: 100px;
background-color: blue;
}
.box3 {
flex: 1;
height: 100px;
background-color: green;
}
.box4 {
flex: 1;
height: 100px;
background-color: yellow;
}
.box5 {
flex: 1;
height: 100px;
background-color: pink;
}
```
这样,父盒子使用了flex布局,并且设为了flex: 1,意味着它会占据整个可用空间。同时,两个子盒子 box1 和 box2 位于第一行,使用了 display: flex 和 flex: 1,分别表示它们使用 flex 布局,并且占据了相等的宽度。同理,第二行的三个子盒子 box3、box4 和 box5 也是如此实现的。