js动画模块

Question

//step代表每次移动的距离写动画模块的时候，不知道为什么block.style.left=block.style.left+step+'px';
是错误的，必须得改成block.style.left=bloc.offsetLeft+step+'px';请高手解答

Answer 1

这个么……获取一个元素的信息的时候获取left就用offsetLeft,获取top的时候就用offsetTop,获取宽就用offsetWidth，获取高就用offsetHeight……似乎本来就是这样的啊……这咋解释……style.left是用设置，offsetLeft用来获取可以试试这个代码
<style type="text/css">
#test_2{ position:absolute; left:0;}
</style>
<div style="position:absolute; left:0;" id="test"></div>
<div id="test_2"></div>
<script type="text/javascript">
var test = document.getElementById("test");
var test_2 = document.getElementById("test_2");
alert(test.style.left+"_"+test.offsetLeft);
alert(test_2.style.left+"_"+test_2.offsetLeft);
</script>可以发现，直接写在style里的left可以用style.left读到，但注意，后面有一个"px"，firefox里是"pt"
但把样式写在样式表<style />里的left用style.left读不到
但用offsetLeft都可以获取……而且获取到的都是数字如果你的left是直接写在标签的style里的话，下面这个还是可以用的。－ －
block.style.left=parseInt(block.style.left, 10)+step+'px';

Answer 2

block.style.left=block.style.left+step+'px'假设当前block.style.left为‘100px',step为20
那表达式右边block.style.left+step+'px' = '100px' + 20 + ‘px' = '100px20px'
这显然是一个非法值block.style.left=parseInt(block.style.left)+step+'px' 才是正确写法