索鸟网

  1. 首页
  2. 用js获取网页元素的位置

用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属性,可以赋值;

相关标签: Html/CSS JQuery JavaScript

来源地址:http://www.imooc.com/article/19400 版权归作者所有!