我正在练习从书本上定位图像.它说,使用DOM,即图像的位置,顶部和左侧值,我们可以使用JavaScript在浏览器窗口中移动图像.
事情是我有图像显示,但当我输入坐标时,它不会移位到它的新值.如果有人能告诉我哪里出错了？
这是HTML文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="newjavascript.js">
</script>
</head>
<body>
<form action="">
<p>
Xcordinate : <input type="text" id="xCod" /><br/>
Ycordinate : <input type="text" id="yCOd" /><br/>
</p>
<br/>
<input type="submit" value="Set the Coordinates" onclick = "moveIt('image', document.getElementById('xCod').value,
document.getElementById('yCod').value )" />
</form>
<div id="image" style="position: absolute; left:0; top:200px" >
<img src="testing.jpg" alt="Picture Cannot be displayed" />
</div>
</body>
</html>
和JavaScript文件
function moveIt (movee, newTop, newLeft){
dom = document.getElementById(movee).style;
dom.top=newTop+"px";
dom.left=newLeft+"px";
}
我有谷歌浏览器的默认浏览器
因为它是一个type="submit"按钮,它会回发并且您再次看到同一页面,您需要return false;阻止提交,如下所示:
<input type="submit" value="Set the Coordinates" onclick = "moveIt('image', document.getElementById('xCod').value,
document.getElementById('yCod').value); return false;" />
在设置演示时您还注意到元素ID已关闭,这个:
Ycordinate : <input type="text" id="yCOd" /><br/>
应该:
Ycordinate : <input type="text" id="yCod" /><br/>
| 归档时间： |
|
| 查看次数： |
118 次 |
| 最近记录： |