javaScript改变div的位置
// JavaScript Document
var div=document.getElementById("divTest");
var btnLeft=document.getElementById("btnLeft");
var btnRight=document.getElementById("btnRight");
var btnShow=document.getElementById("btnShow");
var btnHide=document.getElementById("btnHide");
var moveLeft=function()
{
div.style.left+=50+"px";
};
var moveRight=function()
{
div.style.left-=50+"px";
};
var Show=function()
{
div.style.display="block";
};
var Hide=function()
{
div.style.display="none";
};
//绑定事件和相应的处理程序:
btnLeft.onclick=moveLeft;
btnRight.onclick=moveRight;
btnShow.onclick=Show;
btnHide.onclick=Hide;
---------------------------------------
想问问为什么在页面中点击按钮的时候div只能移动一次呢？再次点击按钮就没用了 展开
参考如下：
<input type="text">
<div id="divShow" style="display:none;position:absolute;">显示的内容；</div>
display:none，表示此层隐藏；
position:absolute，表示此层的为绝对位置，方便后期进行绝对定位
添加事件，完成效果；
<script type="text/javascript">
function showDiv(obj) {
// 保存元素；
var el = obj;
// 获得元素的左升粗偏移量；
var left = obj.offsetLeft;
// 获得元素的顶端偏移量；
var top = obj.offsetTop;
// 循环获得元素的父级控件，累加左和顶端偏移量；
while (obj = obj.offsetParent) {
left += obj.offsetLeft;
top += obj.offsetTop;
}
// 设置层的坐标并显示；
document.all.divShow.style.pixelLeft = left;
// 层的顶端距离为元素的顶端距离加上元素的高；
document.all.divShow.style.pixelTop = top + el.offsetHeight;
document.all.divShow.style.display = "block";
}
</script>
<style>
#divShow
{
width:150px;
height:180px;
border-width:thin;
background:yellow;
}
</style>
<input type="text" onfocus="showDiv(this);">
<div id="divShow" style="display:none;position:absolute;">显示的内容；</div>
注意：
offsetLeft和OffsetTop不是获得元素和页面的距离，只是获得元素和父元素的的距离，所以要进行while循环一层层累加距离，最后得到元素和页面之间的距离
层次关系：本元素漏薯->父返笑者元素->……>body->null，当为null时，退出while循环。
最终效果如下：
div.style.left+=50+"px";
div.style.left的起始值是空字符串，那么上述语句第一次运行后变为50px，请注意这是个字符串，并不是数派闷字！因此第二次尘答弯运行时它的值就变为举袭50px50px，这肯定是个无效值。
可修改为：
div.style.left=div.offsetLeft+50+"px";
var moveLeft=function(){
div.style.left+=50+"px";
};
以上这段代码之中，问题出肆让磨在标红的“px”上。
比如说：
最初，left坐标是0；
第一裂斗次点击，left坐标变成了50px;
第二滑蚂次点击，left坐标试图变成50px50px，这个值是无效的。
也谢谢你了！
