Question

我有一个“使图层移动”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>

现在，为什么修改后它不起作用？

Answer 1

尝试在js调试器中运行它，例如萤火虫。我明白了：

>>> 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转换为具有维度单位的字符串。

Answer 2

Node的样式属性是字符串！基本上你是在连接两个字符串（第二个变量将被装入第一个字符串）=＆gt; “100px”+10 =“100px10” 你必须将这个属性转换为整数，而不是你可以做数学。

var step = 10;
function moveRight(){
  var myNode = document.getElementById("layer2");
  myNode.style.left = parseInt(myNode.style.left)+step;
}

带修改的javascript示例不起作用

2 个答案: