我得到了一个“制作移动的图层”的 javascript 示例代码，并修改了左右移动的函数，创建了以下代码(我对修改后的行进行了注释，以便您可以看到它是如何实现的):
<html>
<head>
<title>JavaScript Radio Example</title>
<script language=javascript type="text/javascript">
//var x=10;
function moveRight( )
{
var layerElement = document.getElementById("layer2");
//x+=10;
//layerElement.style.left=x;
layerElement.style.left += 10;
}
function moveLeft( )
{
var layerElement = document.getElementById("layer2");
//x-=10;
//layerElement.style.left=x;
layerElement.style.left -= 10;
}
</script>
</head>
<body>
<style type="text/css">
#layer1 {
background-color: yellow;
position: absolute;
height:90px;
width:90px;
left:0px;
top:100px;
}
#layer2 {
background-color: red;
position: absolute;
height:90px;
width:90px;
left:10px;
top:100px;
}
</style>
<p id="layer1">This is layer 1</p>
<p id="layer2">This is layer 2</p>
<form action="" name="orderForm">
<input type="BUTTON" value="Move Left" onClick="moveLeft()" />
<input type="BUTTON" value="Move Right" onClick="moveRight()" />
</form>
</body>
</html>
现在，为什么修改后不起作用？
最佳答案
尝试在 js 调试器中运行它，例如 Firebug 。我得到:
>>> var layerElement = document.getElementById("layer2")
>>> layerElement
<p id="layer2" style="left: 130px;">
>>> layerElement.style.left
"130px"
>>> layerElement.style.left -= 10
NaN
请注意，layerElement.style.left 的值是一个字符串“130px”。难怪当我们尝试从中减去 10 时，我们会得到 NaN。
旧代码有效的原因是，当你赋值时，js 显然会发挥一些魔力
layerElement.style.left = x
将 x 转换为具有尺寸单位的字符串。
关于经过修改的 javascript 示例不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3576173/