获取 javascript 中的位置无效

Question

我想做一个小游戏，但是启动有点问题

当我尝试获取 track 或 trackCont 的位置时，它总是 returns x: 0, y: 0。移动 DIV 时没有得到正确的位置：

float: right;
display: block;

甚至无法使用：

position: absolute;
left: 100px;

这是我使用的代码：

var Player = new Array();
var trackEntity;

function getPosition(elem){
    xPos = 0;
    yPos = 0;
    while(elem){
        xPos += (elem.offsetLeft + elem.clientLeft);
        yPos += (elem.offsetTop + elem.clientTop);
        elem = elem.offsetParent;
    }

    return {x: xPos, y: yPos};
}

window.onload = function(){
    trackEntity = document.getElementById("trackCont");
    for (i = 0; i < 4; i += 1){
        Player[i] = new Object();
        document.body.innerHTML += "<div id='p" + i + "' class='player'></div>";
        Player[i].entity = document.getElementById("p" + i);
        Player[i].entity.style.backgroundColor = "rgb(" 
                                               + Math.floor(Math.random() * 256) + ", "
                                               + Math.floor(Math.random() * 256) + ", "
                                               + Math.floor(Math.random() * 256) + 
                                                 ")";
        Player[i].entity.style.left = (getPosition(trackEntity).x) + 20;
        Player[i].entity.style.top = (getPosition(trackEntity).y) + 20;
    }
}

http://jsfiddle.net/dh8uf6Lp/

Answer 1

在给css赋值时需要提供一个unit left。

 Player[i].entity.style.left = (getPosition(trackEntity).x) + 20 +"px";

如果您为 css 维度或位置赋值属性，则在未指定单位时不会更新。

似乎调用 getPosition(trackEntity) 时它不知道它在 DOM 中的什么位置。这是由

引起的

document.body.innerHTML += "<div id='p" + i + "' class='player'></div>";

这会导致浏览器重绘所有元素并且trackEntity失去它的引用。

解决方案：不要通过 innerHTML 插入 html，而是创建 div 并将其附加到 DOM.

 Player[i].entity = document.createElement("div");
 Player[i].entity.id = "p" + i;
 //etc.

 document.body.appendChild(Player[i].entity);

 //Run position code.

http://jsfiddle.net/dh8uf6Lp/3/

获取 javascript 中的位置无效

Get position in javascript not working

html

javascript

css