Question

我在背景上有一个带有一些随机颜色的div，宽度为100px。所以我有另一个按钮，如果点击应该拆分div并给我两个相等的div与随机backgroundcolor。所以，如果我再次点击3分裂，依此类推。所以每次点击我都会在100px宽度内创建一个新的div。怎么能在javascript中完成？

Answer 1

如果您使用flex容器来控制元素尺寸，这将变得相当简单。

随机颜色生成器由ZPiDER（link）

创建

＆＃13;

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;

Answer 2

快速解决方案：使用表并使用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

使用onclick拆分容器中的div

2 个答案: