Question

为希望以后阅读此内容的人编辑此页面：P

好像我在这里要求太多了......但是非常感谢那些帮我解决这个问题的人！实际上我想接受你所有的答案，但似乎我只能接受一个......＆gt;。＆gt;

问题1：
我想移动图像，但是当我尝试获取图像位置时（使用document.getElementById().style.left），当我将其转换为整数时，它会显示 NaN值。我想知道如何解决这个问题：/

这是我的代码：

<script type="text/javascript">

    function playit()
    {
        alert(parseInt(document.getElementById('ball').style.left)); <!-- shows a NaN value -->
    }
</script>

我将图像放入表中并使用onclick函数调用它; <td id="frame" colspan="5" onclick="playit()">确切地说，我宣布了这样的图像：<img src="play/ball.png" id="ball" name="ball"/>

这是我的CSS图片：

#ball
{
    position:absolute;
    top:500px;
    left:500px; 
}

解决方案（由VIPIN JAIN提供）：使用.offsetLeft代替element.style.left

问题2：
修改我用.offsetLeft修复了它，它运行得很好。现在，当我试图移动图像时，我得到了另一个错误。据说我正在使用过多的递归。我知道它发生是因为我正在使用递归，但我想知道，使用递归有什么问题？

这是我的代码：

<script type="text/javascript">

    <script type="text/javascript">

    var lball = document.getElementById('ball').offsetLeft;
    var speed = 500;

    function moveleft()
    {
        if(document.getElementById('ball').offsetLeft >0)
        {
            document.getElementById('ball').offsetLeft-=1;

            setTimeout(moveleft(), speed);
        }
        else gameover();
    }
    function playit()
    {
        score = 0;
        setTimeout(moveleft(), speed);
    }
</script>

有人可以帮我吗？谢谢：）

解决方案（由Teemu提供）： 请参阅下面的Teemu's comment“编辑II ”部分。

问题3（实际上我在评论中询问：P）
当我尝试使用document.getElementById('ball').offsetLeft-=1;设置图像位置时，它会显示未定义的值。

解决方案（由Kemal Fadillah提供）：“那是因为您无法设置元素的offsetLeft值。您必须将新位置值设置为{{1}这样的事情：.style.left“

问题4（再次，我在评论中问它：P）
似乎图像不会平滑移动（看起来它突然“扭曲”到另一个地方）。我已经提高了element.style.left = new_value + "px";值，但它仍然无效。我错过了什么吗？我想知道.. ：/

解决方案（由Kemal Fadillah给出）：“将speed设置为10或20.这应该使动画足够平滑。使图像移动得更快，而不是减少左边偏移1，尝试将其减少3。“

Answer 1

你应该使用jQuery，它更容易。尝试像

这样的东西

$(function(){
$("img#ball").offset({top: 10px, left: 500px});
});

可在此处找到更多信息：

http://api.jquery.com/offset/

关于jQuery的一般信息可以在这里找到：

http://jquery.com/

Answer 2

这需要offsetLeft和offsetTop值，请参阅链接

This post

Answer 3

如果您在检索属性之前未设置该属性，则

document.getElementById('ball').style.left会返回''（或undefined）。这就是你从NaN获得parseInt()的原因。

修改

似乎你的风格定义没问题（编辑你的帖子后）。您可以尝试使用parseInt()：
中的基数
alert(parseInt(document.getElementById('ball').style.left,10));

这被证明不是倾斜的，但使用它有时会有所帮助。

编辑II

这种情况会发生，因为您执行了所有setTimeout次，并且您没有清除它们。试试这种方式：

var delay; function moveLeft(){ : if(delay){ // Add this if before all of your setTimeout() calls and in gameover() too clearTimeout(delay); } delay=setTimeout(moveLeft, speed); : }

通过设置超时，setTimeout(doFunction(),delaytime);会因为doFunction而在()之后立即执行delaytime，而在{{1}}之后再次执行，这实际上是过多的递归......

Answer 4

如果在外部样式表中声明了element.style，则无法获得CSS样式。来自MDN文档：

然而，它对于了解元素的风格没有用一般来说，因为它只表示在中设置的CSS声明 element的内联样式属性，而不是来自样式规则的属性其他地方，例如该部分中的样式规则或外部规则样式表。

https://developer.mozilla.org/en/DOM/element.style

相反，您必须使用window.getComputedStyle()来获取属性。

window.getComputedStyle(document.getElementById('ball')).left; // returns 500px

javascript：移动图片

4 个答案: