动态改变控件的位置

需求需要动态改变控件在页面中的位置。例如有个页面有三个ｄｉｖ１，２和３，需要动态改变ｄｉｖ的位置。条件是第一个ｄｉｖ距页面的高度不一定，并且三个ｄｉｖ自身的高度也不一定。思路1通过ｄｉｖ的绝对定位： 这就要求这个每个ｄｉｖ是style=position:absolute（即此控件的位置是独立的），因为只有这样才能通过坐标来改变ｄｉｖ的位置。但是这样就需要指定每个ｄｉｖ的高度，否则所有ｄｉｖ就会默认在页面的头部，堆叠在一起。 1．首先通过如下方法求出第一个ｄｉｖ距页面头部的高度，和距左面的距离。

function tixa_get_RealLeft(el)

{ xPos = el.offsetLeft; tempEl = el.offsetParent;

while (tempEl != null) { xPos += tempEl.offsetLeft;

tempEl = tempEl.offsetParent; }return xPos;

}

function tixa_get_realTop(el)

{ yPos = el.offsetTop; tempEl = el.offsetParent;

while (tempEl != null) { yPos += tempEl.offsetTop;

tempEl = tempEl.offsetParent; }return yPos; 

}

 然后通过document.body.offsetHeight来获取每个子页面的值（我的每个ｄｉｖ是通过ｊｓｐ　ｉｎｃｌｕｄｅ的方式写入页面的，所以可以获每个ｄｉｖ的自身的高度）。然后通过第一个ｄｉｖ距页面头部的高度和它自身的高度就可以得到第二个ｄｉｖ　距页面头部的高度。依次类推每个ｄｉｖ的距页面头部的高度都可以计算出来。这样就可以通过document.getElementById(divID).style.top = div高度; 2.然后通过改变相应ｄｉｖ的高度就可以交换每个ｄｉｖ的位置了。 思路２同ｘｍｌ的增加删除节点的方法来处理（不能忘记ｈｔｍｌ也是一种）。以 把ｄｉｖ２一道ｄｉｖ１的前面为例:document.getElementById(div2).parentNode.insertBefore( document.getElementById(div2).parentNode.removeChild( document.getElementById(div2)),document.getElementById(div1));

解释：insertBefore是在一个节点的前面增加一个节点，参数1需要增加的节点，参数２：需要放在其前面的节点　　，removeChild方法是删除一个节点，同时它的返回值是返回一个和被删除的节点一莫一样的一个节点，这样正好加到ｄｉｖ１的前面。由此可以看出两种方法的优劣，往往一些事情如果坐起来很复杂，很有可能就是路子走错了。