http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html
clientHeight和clientWidth：
元素的content+padding視覺面積，不包括border和滾動條占用的空間。
scrollHeight和scrollWidth
滾動條滾過的所有長度和寬度,有兼容性
scrollTop和scrollLeft
滾動條垂直距離，是document對象的scrollTop屬性。
滾動條水平距離，是document對象的scrollLeft屬性。
scrollTop和scrollLeft屬性可以賦值，并立即自動滾動網頁到相應位置
offsetTop和offsetLeft
該元素的左/上角與父容器（offsetParent對象）左/上角的距離
獲取網頁的大小
function getViewport(){
if (document.compatMode == "BackCompat"){
return {
width: document.body.clientWidth,//IE6
height: document.body.clientHeight
}
} else {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
}
---------------------------------------------------------------------
//取scrollHeight和clientHeight的最大值
function getPagearea(){
if (document.compatMode == "BackCompat"){
return {
width: Math.max(document.body.scrollWidth,
document.body.clientWidth),
height: Math.max(document.body.scrollHeight,
document.body.clientHeight)
}
} else {
return {
width: Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth),
height: Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight)
}
}
}
獲取網頁元素的絕對位置
該元素的左上角相對于整張網頁左上角的坐標
由于在表格和iframe中，offsetParent對象未必等于父容器，以下的函數對于表格和iframe中的元素不適用，所以表格被淘汰了。。。
function getElementLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !==null){
actualLeft += (current.offsetLeft+current.clientLeft);
current = current.offsetParent;
}
return actualLeft;
}
function getElementTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += (current.offsetTop+current.clientTop);
current = current.offsetParent;
}
return actualTop;
}
獲取網頁元素的相對位置
該元素左上角相對于瀏覽器窗口左上角的坐標；
有了絕對位置以后，將絕對坐標減去頁面的滾動條滾動的距離就可以了。
滾動條垂直距離，是document對象的scrollTop屬性。
滾動條水平距離，是document對象的scrollLeft屬性。
//該元素left
function getElementViewLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += (current.offsetLeft+current.clientLeft);
current = current.offsetParent;
}
if (document.compatMode == "BackCompat"){
var elementScrollLeft=document.body.scrollLeft;
} else {
var elementScrollLeft=document.documentElement.scrollLeft;
}
return actualLeft-elementScrollLeft;
}
//該元素top
function getElementViewTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += (current.offsetTop+current.clientTop);
current = current.offsetParent;
}
if (document.compatMode == "BackCompat"){
var elementScrollTop=document.body.scrollTop;
} else {
var elementScrollTop=document.documentElement.scrollTop;
}
return actualTop-elementScrollTop;
}
