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");

A working JsBin here.

Answer 1

你的div是“空的”。

你可以

设置内容，因此＆lt; div＆gt;获得一个高度（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";

DIV不可见？ JavaScript的

2 个答案: