位置span元素作为附加到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";

（通常我会说＆＃34;或者你正在使用jQuery＆＃34;后面是一个带选择器的例子，但是以数字开头的id选择器是PITA ...）< / p>

但另外：如果两个（或更多）随机创建的障碍位于同一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）时，值得考虑是否使用类。