通过代码控制div移动

新建一个html文件，线加入一个div，设置id为divTest，位置为相对布局（relative），长宽为100px，背景色为黄色：

 <div id="divTest"    style="position:relative;        top:0px;        left:0px;        width:100px;        height:100px;        border:1px solid blue;        background:yellow;"> </div>

在html中增加脚本，建立一个函数moveDiv，用于操作div移动。这里用到一个函数parseInt，原因在于div的style.left属性是以像素为单位，实际上是一个字符串，比如100像素对应“100px”，这样是不能直接用+操作改变其像素值的，必须先获取像素的数字部分，然后将其增减，再将px一起赋值给div的位置属性。

增加一个按钮，显示“点我移动”，设置一个onclick事件，将其与函数moveDiv关联，注意onclick全部小写，同时不要忘记moveDiv后面的括号。

整个小程序的代码如下，注意大小写和斜杠等细节。

程序编写完成，使用任意一个浏览器打开该html文件，可以看到一个黄色背景蓝色边框的方块，以及一个“点我移动”的按钮。

点击“点我移动”按钮，方块向右移动了一下，同时在方块上出现一个数字，这个数字就是方块当前的left位置值。