javascript - DIV 不可见？JavaScript

Question

我对使用简单函数创建的 div 有疑问。我可以在控制台中看到它们有颜色并且位置很好。但是它们没有显示在浏览器上？

function CreateDivs(){
        var dfrag = document.createDocumentFragment();
        var divNumbers = 5;
        var i = 0;
        var angle = 0;
        for(i=0; i < divNumbers; i++){
            x = 100 * Math.cos(angle) + 200;
            y = 100 * Math.sin(angle) + 200;

            var div = document.createElement("div");
                div.style.left = x + "px";
                div.style.right = y + "px";
                div.style.borderColor = rndColor();
                div.style.backgroundColor = rndColor();

                dfrag.appendChild(div);
                }
                divWrapper.appendChild(dfrag);
            }

我使用一个简单的函数 rndColor();

 var createButton = document.getElementById("div-generator");
 var divWrapper = document.getElementById("wrapper");

这里有一个工作的 JsBin。

Answer 1

你的 div 是“空的”。

你可以

• 设置内容，因此 <div> 获得高度（jsFiddle）：

  div.innerHTML = "A";
  

• 设置高度而不是提供内容（jsFiddle）：

  div.style.height = "10px";
  

• 将后一种方法与 CSS 类（jsFiddle）结合起来：

  div.className = "my-div";
  
  .my-div {
    min-height: 20px;
  }
  

Answer 2

我认为你的 div 没有宽度和高度。

将宽度和高度设置为您的 div。

div.style.width = "100px";
div.style.height = "100px";