需求需要動態改變控件在頁面中的位置。例如有個頁面有三個ｄｉｖ１，２和３，需要動態改變ｄｉｖ的位置。條件是第一個ｄｉｖ距頁面的高度不一定，並且三個ｄｉｖ自身的高度也不一定。思路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方法是刪除一個節點，同時它的返回值是返回一個和被刪除的節點一莫一樣的一個節點，這樣正好加到ｄｉｖ１的前面。由此可以看出兩種方法的優劣，往往一些事情如果坐起來很複雜，很有可能就是路子走錯了。