js获取元素相对、绝对位置

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;
　　}