位置跨度元素附加到div

Question

我正在做一個ascii滑雪免費遊戲......回到Win95遊戲。

由於某些原因，附加的障礙跨度被聚集到一側，儘管我設置了絕對位置並保留在隨機座標上。

下面是它應該如何看（跨度是隨機分佈）：

這裏是我的代碼片段，在時間間隔產生的障礙，並分配絕對定位和左側定位：

function objectFactory() { 

var randObj = Math.floor((Math.random()*7)+1), 
      randX = Math.floor((Math.random()*700)+1), 
      randY = Math.floor((Math.random()*400)+1); 

$('#myObstacles').append("<span id=\"" + randX + "\">" + items[randObj] + "</span>"); 

document.getElementById(randX).style.position = "absolute"; 
document.getElementById(randX).style.left = randX; 
document.getElementById(randX).style.top = 500; 
console.log(document.getElementById(randX).style.left); 
} 

附加的div沒有被分配left位置：

下面是它應該是什麼樣子：

而且，console.log(document.getElementById(randX).style.left);不顯示任何內容。

有什麼想法？

Answer 1

你需要給單位分配給.style.left和.style.top時：

document.getElementById(randX).style.left = randX + "px"; 
document.getElementById(randX).style.top = "500px"; 

（通常情況下，我會說「或者你正在使用jQuery」，然後用一個選擇的例子，但是id選擇開始與數字是皮塔...）

但分開：如果兩個（或更多）你隨機創建的障礙是在相同的randX位置？您將最終創建與id相同的多個元素，這是無效的。

相反，正好與物體直接合作：

function objectFactory() { 
    var randObj = Math.floor((Math.random()*7)+1), 
     randX = Math.floor((Math.random()*700)+1), 
     randY = Math.floor((Math.random()*400)+1), 
     obstacle = $("<span id=\"" + id + "\">" + items[randObj] + "</span>"); 

    obstacle.css({ 
     position: "absolute", 
     left:  randX, 
     top:  500 
    }).appendTo("#myObstacles"); 

} 

附註：無論何時你發現自己有很多元素（position: absolute，top: 500px）的分配靜態樣式信息，這是值得看是否使用上課。