1、偏移量

offsetWidth,offsetHeigth:元素的可见宽度,高度【包括内边距,边框,滚动条】

offsetParent,offsetLeft,offsetTop:元素的包含元素,元素与包含元素在水平,垂直方向上的偏移量

offsetParent,现代主浏览器指body元素,ie6、7浏览器指元素的直接父元素【注：当元素的父元素为相对定位时，那么offsetParent指元素的直接父元素】

//获取元素与浏览器在垂直方向上的偏移量(兼容ie6、7)  function getElemTop(elem){  　　return elem.offsetParent ? elem.offsetTop + arguments.callee(elem.offsetParent) : elem.offsetTop;  }  //获取元素与浏览器在水平方向上的偏移量(兼容ie6、7)  function getElemLeft(elem){  　　return elem.offsetParent ? elem.offsetLeft + arguments.callee(elem.offsetParent) : elem.offsetLeft;  }  

 

2、客户区大小

clientWidth,clientHeight:元素内容宽度,高度【只包括内边距】

获取浏览器的视口大小【兼容ie的混杂模式,在不同浏览器版本下,不同浏览器下可能会有几个像素的差异】

//获取浏览器的视口大小【兼容ie的混杂模式,在不同浏览器版本下,不同浏览器下可能会有几个像素的差异】   function getViewport(){       return {           width:document.documentElement.clientWidth||document.body.clientWidth,           height:document.documentElement.clientHeight||document.body.clientWidth       }   }  

 

3、滚动大小

scrollWidth,scrollHeight:元素内容的总宽度,总高度

scrollLeft,scrollTop:元素左侧不可见内容的像素大小,上侧不可见内容的像素大小

//获取浏览器的滚动大小  function getScrollDimension(){   return {    width:document.documentElement.scrollWidth||document.body.scrollWidth,    height:document.documentElement.scrollHeight||document.body.scrollHeight   }  }  

 

4、元素的坐标

getBoundingClientRect:该方法返回一个对象,元素的客户区坐标【这个方法返回的结果数在不同浏览器下不一致,ie6、7浏览器坐标默认为{2,2}】

//定义一个获取元素坐标的方法  function getElemRect(elem){   return {    left:elem.getBoundingClientRect().left,    top:elem.getBoundingClientRect().top,    right:elem.getBoundingClientRect().right,    bottom:elem.getBoundingClientRect().bottom   }  }  

 

实例如：实现浏览器主体内容右侧的一个浮动元素

---

html代码：

<div class="box-wrap">   <img height="330" width="495" src="http://img02.taobaocdn.com/tps/i2/T197COXX8dXXXXXXXX-600-400.png">   <img height="330" width="495" src="http://img02.taobaocdn.com/tps/i2/T197COXX8dXXXXXXXX-600-400.png">   <!--这里很多img图片,填充内容-->      <div id="fixed-elem" class="fixed-elem">        <img src="http://img02.taobaocdn.com/tps/i2/T1Yop9XbRsXXXXXXXX-90-330.png">      </div>  </div>  

 css代码：

body {   margin: 0;   padding: 0;  }  .box-wrap {   width: 990px;   margin: 0 auto;   position: relative;  }  img {   float: left;  }  .fixed-elem {   width: 90px;   height: 330px;   position: absolute;   top: 0;   left: 1000px; /*页面主体宽度 + 元素与页面内容间距*/  }  

 javascript代码：

(function(){   window.onload = function(){    var fixed_elem = document.getElementById("fixed-elem");        //定义一个设置元素位置的方法,参数为:元素,页面主体宽度,元素与页面内容间距      function setElemPosition(elem,bd_width,margin_left){          var client_w = document.documentElement.clientWidth||document.body.clientWidth;     var pos_left = (client_w - bd_width)/2 + bd_width + margin_left;     //console.log(pos_left);          window.onscroll = function(){      var scroll_top = document.documentElement.scrollTop||document.body.scrollTop;      if(window.XMLHttpRequest){       console.log(scroll_top);       elem.style.cssText = 'position:' + 'fixed;' + 'top:' + '0px;' + 'left:' + pos_left + 'px;';      }else{       elem.style.cssText =  'position:' + 'absolute;' + 'top:' + scroll_top + 'px;';      }     }    }    setElemPosition(fixed_elem,990,10);   }   })()