Javascript - 將圖像添加到隨機位置的節點

Question

我期待從下面的腳本中定位一個簡單圖像在DIV中的隨機位置。 雖然圖像確實顯示，但它們都是並排顯示的，而我可以在控制檯上看到隨機位置正在生成。 有什麼提示嗎？

<script type="text/javascript"> 
    function generateFaces(){ 
    var numberOfFaces = 5; 
    var theLeftSide = document.getElementById("leftSide"); 
    while (numberOfFaces > 0) { 
     var random_left = Math.floor(Math.random()*400); 
     var random_top = Math.floor(Math.random()*400); 
     var theImage = document.createElement("img"); 
     theImage.src = "face.png"; 
     theImage.style.top = '"'+random_top+'px"'; 
     console.log("top style: " + '"'+random_top+'px"'); 
     theImage.style.left = '"'+random_left+'px"'; 
     theLeftSide.appendChild(theImage); 
     numberOfFaces--; 
    } 
    } 
</script> 

謝謝！

Answer 1

請嘗試這樣。

您需要設置相對位置並設置樣式。

theImage.style = "top:"+random_top+"px; left:"+random_left+"px; position:relative"; 

您可以在您添加了圖像的風格不是元素上實際應用的開發者控制檯檢查。

#leftSide 
 
{ 
 
    height:400px; 
 
    width:400px; 
 
}

<div id="leftSide"></div> 
 
<script type="text/javascript"> 
 
    function generateFaces(){ 
 
    var numberOfFaces = 5; 
 
    var theLeftSide = document.getElementById("leftSide"); 
 
    while (numberOfFaces > 0) { 
 
     var random_left = Math.floor(Math.random()*400); 
 
     var random_top = Math.floor(Math.random()*400); 
 
     var theImage = document.createElement("img"); 
 
     
 
     theImage.src = "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR9tLvsasK-kB72yV_zC8hn0qZhHbshQdXLELCXaF1JkWIOuYfUUsuMsw"; 
 
     theImage.style = "top:"+random_top+"px; left:"+random_left+"px; position:relative"; 
 
     theLeftSide.appendChild(theImage); 
 
    
 
     
 
     numberOfFaces--; 
 
    } 
 
    } 
 
    generateFaces(); 
 
</script>