用js获取网页元素的位置-原创手记-慕课网

一，网页大小和浏览器窗口大小(viewport)
浏览器窗口的大小，则是指在浏览器窗口中看到的那部分网页面积，又叫做viewport（视口）。
很显然，如果网页的内容能够在浏览器窗口中全部显示（也就是不出现滚动条），那么网页的大小和浏览器窗口的大小是相等的。如果不能全部显示，则滚动浏览器窗口，可以显示出网页的各个部分。
二，获取网页的大小
网页上的每个元素都有,clientWidth和clientHeight属性,这两个属性指元素的内容部分和padding部分，的视觉面积,不包含边框和滚动条所占用的空间。

function getViewport(){
  if(document.compatMode=="BcakCompat"){
       return {
            width:document.body.clientWidth,
            height:document.body.clientHeight,
            }
      }esle{
             return {
                     width:document.documentElement.clientWidth,
                     height:document.documentElement.clientHeight,
                    }        
           }
}

getViewport()函数就可以获取浏览器的宽和高;
在使用时需注意的是
1,这个函数必须在在页面加载完成之后才能运行，否则都document对象还没生成，浏览器会报错。
2,clientHeight和clientWidth都是只读属性，不能对它们赋值.
3,大多数情况下，都是document.documentElement.clientWidth返回正确值。但是，在IE6的quirks模式中，document.body.clientWidth返回正确的值，因此函数中加入了对文档模式的判断。

三,获取网页大小的另一种方法
网页上的每个元素都有scrollWidth和scrollHeight属性,包含滚动条在内的视觉面积.所以，document的scrollHeight和scrollWidth就是网页的大小.意思就是滚动条滚过的所有长度和宽度。

function getPagearea () {
 if(document.compatMode=="BackCompat"){
     return {
                  width:Math.max(document.body.clientWidth,document.body.scrollWidth),
                  height:Math.max(document.body.clientHeight,document.body.scrollHeight),
               }
         }else{
              return{
                   width:Math.max(document.body.clientWidth,document.body.scrollWidth),
                  height:Math.max(document.body.clientHeight,document.body.scrollHeight),
                      }
           }
}

四,获取网页元素的绝对位置
网页元素的绝对位置,指该元素的左上角相对于整张网页的左上角的的坐标,这个绝对位置要通过计算才能得到.
首先每个元素都有offsetTop和offsetLeft属性,表示该容器相对于父容器（offsetParent）左上角的距离，所以需要累加才能得到该元素的绝对坐标.

function getElementLeft (element) {
      var actualtLeft = element.offsetLeft;
      var current = element.offsetParent; 
       if (current !== null) {
              actualLeft +=  current.offsetLeft;
              current =  current.offsetParent;
         }
      return  actualLeft;
 }

function  getElementTop (element) {
       var actualTop = element.offsetTop;
       var current = element.offsetParent;
       if (current !==null) {
            actualTop +=current.offsetTop;
           current = current.offsetParent; 
           }
     return  actualTop;
  }

五,获取网页元素的相对位置
网页元素的相对位置,指的是元素左上角相对于浏览器窗口的左上角的坐标.有了绝对位置，那么就可以用绝对坐标减去滚动条的滚动垂直距离，是document对象的scrollTop属性,滚动条滚动水平距离是document对象的scrollLeft;

function getElementViewport  (element) {
       var actualLeft = element.offsetLeft;
　　　　var current = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualLeft += current.offsetLeft;
　　　　　　current = current.offsetParent;
　　　　}
　　　　if (document.compatMode == "BackCompat"){
　　　　　　var elementScrollLeft=document.body.scrollLeft;
　　　　} else {
　　　　　　var elementScrollLeft=document.documentElement.scrollLeft; 
　　　　}
　　　　return actualLeft-elementScrollLeft;
}

function getElementViewTop(element){
　　　　var actualTop = element.offsetTop;
　　　　var current = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualTop += current. offsetTop;
　　　　　　current = current.offsetParent;
　　　　}
　　　　 if (document.compatMode == "BackCompat"){
　　　　　　var elementScrollTop=document.body.scrollTop;
　　　　} else {
　　　　　　var elementScrollTop=document.documentElement.scrollTop; 
　　　　}
　　　　return actualTop-elementScrollTop;
　　}

scrollTop和scrollLeft属性是可以赋值的，并且会立即自动滚动网页到相应位置，因此可以利用它们改变网页元素的相对位置。

六、获取元素位置的快速方法
除了上面的函数以外，还有一种快速方法，可以立刻获得网页元素的位置。
那就是使用getBoundingClientRect()方法。它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。
所以，网页元素的相对位置就是
　　var X= this.getBoundingClientRect().left;

　　var Y =this.getBoundingClientRect().top;
再加上滚动距离，就可以得到绝对位置
　　var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;

　　var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
目前，IE、Firefox 3.0+、Opera 9.5+都支持该方法，而Firefox 2.x、Safari、Chrome、Konqueror不支持。

这里使用了
1，clientHeight和clientWidth只读属性 ;
2，scrollWidth和scrollHeight属性;
3，offsetLeft和offsetTop和offsetParent属性;
4， scrollTop和scrollLeft属性，可以赋值;