javascript动态创建图层，为什么使用循环遍历之后div层中只显示最后一个图片？求教~

Question

javascript遍历图片

Answer 1

               
                for (var key in Date) {
                    var divImg = document.createElement("div");
                //  var img = document.createElement("img");
                     divImg.className = "divStyle";
                    divImg.innerHTML = "<img src="+key+" />";//问题就出现在这里了
                                     document.body.appendChild(divImg);
                }

Answer 2

CSS里面设置的坐标都是一样的，当然重叠在一起了

Answer 3

.divStyle 
{
    position:absolute;
    height:150px;
    width:600px;
    border-style:solid;
    border-width:thin;
    border-color:Blue;
}
function backGround() {
    var Date = { "images/001small.jpg": "['images/001medium.jpg','images/001.jpg']", "images/002small.gif": "['images/002medium.jpg','images/002.gif']", "images/003small.jpg": "['images/003medium.jpg','images/003.jpg']" };
    var divImg = '<div class="divStyle">';
    for (var key in Date) {
        divImg += '<img src="'+ key +'" />';
    }
    divImg += '</div>';
    document.body.innerHTML += divImg;
}
<a href="javascript:backGround()">背景</a>

Answer 4

你希望是什么样子呢？
你每张图片外面的div全用了class= divStyle
最终效果就是 叠加要横着走divStyle 
        {
            position:static;
            float:left;
            height:150px;
            width:600px;
            border-style:solid;
            border-width:thin;
            border-color:Blue;
            }

Answer 5

你希望是什么样子呢？
你每张图片外面的div全用了class= divStyle
最终效果就是 叠加要横着走divStyle 
        {
            position:static;
            float:left;
            height:150px;
            width:600px;
            border-style:solid;
            border-width:thin;
            border-color:Blue;
            }

嗯，还真是这样，最后我在for循环中动态的添加了img，这样就可以了，谢了啊！

Answer 6

CSS里面设置的坐标都是一样的，当然重叠在一起了
恩恩，发现了测了好多遍，刚开始学就是不容易