第一种 按钮控制
首先 创建两个html按钮和一个div并给div一个样式
input type="button" value="左" id="1">div { width: 100px; height: 100px; background-color: bisque; position: absolute; left: 100px; top: 100px; }然后在script中获得div和两个按钮
var left = document.getElementById("2"); var right = document.getElementById("1"); var div = document.getElementById("3");然后添加onclick函数
left.onclick = function () { } right.onclick = function () { }设置一个变量，控制div的left改变var x = 100;当点击按钮时触发left.onclick = function () { x=x+10; div.style.left = x+"px"; } right.onclick = function () { x=x-10; div.style.left = x+"px"; }源码：Title
第二种，键值控制
同样在html中创建div并给其样式在script里面 获得div
var div=document.getElementById("3");然后声明两个变量控制改变div的left和top
立即学习“Java免费学习笔记（深入）”；
var px=100; var py =100;然后获得键值
document.onkeydown（在document文档对象中，按任何键都会触发此函数）
alert中输出的event.keyCode会对应按键时，当前键相应的事件值（即每一个按键对应为一个键值）document.onkeydown = function(){ alert(event.keyCode); }然后通过测试上下左右得到键值，在swich语句中改变div的left和top改变其位置
switch (event.keyCode){ case 37: px = px-10; div.style.left = px+"px"; break; case 38: py = py-10; div.style.top = py+"px"; break; case 39: px = px+10; div.style.left = px+"px"; break; case 40: py = py+10; div.style.top = py+"px"; break; }源码：
Title 以上就是JavaScript强化教程――DOM编程（两种控制div移动的方法）的内容，更多相关内容请关注PHP中文网（www.php.cn）！
相关文章
解决全局变量获取 DOM 元素为 null 的常见问题
JavaScript 动态创建元素后立即消失的解决方案
简化多组展开/收起按钮的交互逻辑：用 jQuery 一行绑定实现批量控制
如何通过JavaScript脚本在Chrome中真正选中复选框并触发表单验证
如何用单个函数处理多个按钮的点击事件并简化代码
相关标签:
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
更多热门AI工具
