Javascript使div不显示

我有一个具有相对位置和固定宽度和高度的div（我们称之为fatherDiv）

我将这个对象发送到一个javascript函数（init），该函数创建3个重叠div，并将它们作为fatherDiv的孩子。然而，这3个重叠div没有正确显示

我希望有这样的结果：

我试图通过使用以下javascript函数来实现这一点：

   function fabDiv(width, z) {

    var element = document.createElement("div");
    element.setAttribute("height", "200px");
    element.setAttribute("width", width.toString()+"px");
    element.setAttribute("position", "absolute");
    element.setAttribute("top", "0");
    element.setAttribute("left", "0");
    element.setAttribute("z-index", z.toString());

    return element;
}
function init(container, /*img1, img2, img3,*/ interval) {

    div1 = fabDiv(294, 3);
    div2 = fabDiv(265, 2);
    div3 = fabDiv(235, 1);

    container.appendChild(div1);
    container.appendChild(div2);
    container.appendChild(div3);

    div3.setAttribute("background-color", "lightblue");
    div2.setAttribute("background-color", "blue");
    div1.setAttribute("background-color", "darkblue");
}

欢迎任何建议。谢谢：）

PS：当我在chrome上使用F12检查创建的html元素时，我可以在代码中看到div，但小工具提示显示它们没有高度（0px）。

function fabDiv(width, bgCol) {  
    var el = document.createElement("div");  
    el.style.height = "200px";
    el.style.width = width+"px";
    el.style.position = "absolute";
    el.style.backgroundColor = bgCol;  
    return el;
}

function init(container, /*img1, img2, img3,*/ interval) {
    container.appendChild( fabDiv(294, "lightblue") );
    container.appendChild( fabDiv(265, "blue") );
    container.appendChild( fabDiv(235, "darkblue") );
}

var cont = document.getElementById('container');
init(cont);

function CSS( el, prop, val ){
   if(!val && typeof prop == "object" ) for(var key in prop) el.style[key] = prop[key];
   else el.style[prop] = val;
   return el; 
}

function fabDiv( obj ) {
  var el = document.createElement("div");
  CSS(el, {height:"200px", width:obj.width+"px", position:"absolute", backgroundColor:obj.backgroundColor
  });
  document.getElementById(obj.appendTo).appendChild(el);
  return el;
}

function init() {
  fabDiv({width:294, backgroundColor:"lightblue", appendTo:'container'});
  fabDiv({width:265, backgroundColor:"blue", appendTo:'container'});
  fabDiv({width:235, backgroundColor:"darkblue", appendTo:'container'});
}

另一种方法是：

function fabDiv(width, bgCol) {  
    var el = document.createElement("div");  
    el.style.height = "200px";
    el.style.width = width+"px";
    el.style.position = "absolute";
    el.style.backgroundColor = bgCol;  
    return el;
}

function init(container, /*img1, img2, img3,*/ interval) {
    container.appendChild( fabDiv(294, "lightblue") );
    container.appendChild( fabDiv(265, "blue") );
    container.appendChild( fabDiv(235, "darkblue") );
}

var cont = document.getElementById('container');
init(cont);

function CSS( el, prop, val ){
   if(!val && typeof prop == "object" ) for(var key in prop) el.style[key] = prop[key];
   else el.style[prop] = val;
   return el; 
}

function fabDiv( obj ) {
  var el = document.createElement("div");
  CSS(el, {height:"200px", width:obj.width+"px", position:"absolute", backgroundColor:obj.backgroundColor
  });
  document.getElementById(obj.appendTo).appendChild(el);
  return el;
}

function init() {
  fabDiv({width:294, backgroundColor:"lightblue", appendTo:'container'});
  fabDiv({width:265, backgroundColor:"blue", appendTo:'container'});
  fabDiv({width:235, backgroundColor:"darkblue", appendTo:'container'});
}

---

float:left

在使用绝对定位时没有意义，而且背景色是一种样式而不是属性

div.style.backgroundColor=“#0F0”。你需要切换z索引顺序，数字越大，它们在堆栈中的位置就越高！在测试后没有删除它，看看是否修复了它。兆字节如果是这样的话，那么z-指数也是这样，对吗？把它全部改成这个就成功了。感谢您指出以下事实：attributes=/=style properties.：）元素.setAttribute（“样式”，“背景色：“+color+”；高度：200px；宽度：“+width.toString（）+”px；位置：绝对；顶部：0px；左侧：0px；z索引：“+z.toString（））；您不必使用.toString（）函数，当需要将数字转换为字符串时，会自动调用该函数。style.float=“left”是我的新函数。请解释一下。我认为这是不必要的（我曾经把它删掉了，因为我认为它在OP里）。我的坏我guess@J_Ocampo不，不需要它，它是一个复制粘贴留在。还添加了另一个很好的例子。