我在背景上有一个带有一些随机颜色的div,宽度为100px。所以我有另一个按钮,如果点击应该拆分div并给我两个相等的div与随机backgroundcolor。所以,如果我再次点击3分裂,依此类推。所以每次点击我都会在100px宽度内创建一个新的div。怎么能在javascript中完成?
答案 0 :(得分:0)
如果您使用flex容器来控制元素尺寸,这将变得相当简单。
随机颜色生成器由ZPiDER(link)
创建
const btn = document.getElementById("btnAdd");
const container = document.getElementById("container");
btn.addEventListener("click", function(){
// Create a new div element
const div = document.createElement("div");
// Assign a random background color
div.style.backgroundColor = "#"+((1<<24)*Math.random()|0).toString(16)
// Append the new div to the parent element
container.appendChild(div);
});
&#13;
#container {
display: flex;
width: 100px;
}
#container div {
flex-grow: 1;
height: 100px;
background-color: red;
outline: 1px solid white;
}
&#13;
<button id="btnAdd">Add</button>
<div id="container"></div>
&#13;
答案 1 :(得分:0)
快速解决方案:使用表并使用JS添加td。替代方案你可以使用和显示:flex;。这是一个指南:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
var colors = new Array ();
colors[0] = "yellow";
colors[1] = "blue";
colors[2] = "red";
colors[3] = "green";
colors[4] = "black";
colors[5] = "white";
document.addEventListener('click', function(e) {
e.target.parentNode.innerHTML += '<td></td>';
var elements = document.getElementsByTagName('td');
for(var i = 0; i < elements.length; i++) {
var a = Math.floor(5*Math.random());
elements[i].style.backgroundColor = colors[a];
}
});
table {
width: 100%;
}
td {
background-color: blue;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td></td>
</tr>
</table>
此致,Armin