javascript - 试图改变javascript中的文本位置

Question

我在 html 中制作了四个按钮（input type="button"），并希望它们在点击时运行功能，但没有任何反应。html代码是：

<div id="newtext" style="position:absolute; top:100px;">
<p>this is Text</p>
</div>
<form>
<input type="button" name="moveLayer" value="move Left" onclick="move('left');">
<input type="button" name="moveLayer" value="move Right" onclick="move('right');">
<input type="button" name="moveLayer" value="move Up" onclick="move('up'); ">
<input type="button" name="moveLayer" value="move Down" onclick="move('down'); ">
</form>

脚本是：

function move(direction) {
var layerText = document.getElementByID("newtext");

switch(direction) {

case "left":
    layerText.style.left=50;
    break;

case "right":
    layerText.style.right=150;
    break;

case "up":
    layerText.style.up=50;
    break;
case "down":
    layerText.style.down=150;
    break;
default:
it is not working;
}

}

提前致谢..

Answer 1

layerText.style.up=50; ^

layerText.style.down=150; ^ 上下无属性。改用顶部和底部；

默认：

it is not working;

可能导致语法错误

Answer 2

这应该有效（没有 style.up 和 style.down 之类的东西）：

function move(direction) {
    var layerText = document.getElementById("newtext");

    switch (direction) {

        case "left":
            layerText.style.left = "50px";
            break;

        case "right":
            layerText.style.left = "150px";
            break;

        case "up":
            layerText.style.top = "50px";
            break;

        case "down":
            layerText.style.top = "150px";
            break;
    }
}

演示：http: //jsfiddle.net/GE3C5/2/