获取dom元素那些讨厌的位置封装代码
介绍
解决各个浏览器下 获取dom 元素的 位置
兼容性
ie 6 7 8 firefox 3.6 chrome 4.0 目前只测试了这几个浏览器
作者
Jelle ・ lu QQ:271412542 Email:[email protected] blogs:http://www.cnblogs.com/idche/
源码说明
jquery 源码给我很大帮助,也用到一个叫 布鲁斯 ・ 李 的同学的源码,当然更多资源来源于网络。
功能说明
// jelle(elem) 对象 elem传递对象ID 或者 dom对象 如果是窗口 传递 window 对象
//.offset() 返回当前对象相对浏览器的绝对位置 ,返回值 = {top:a,left:b};
//.inner() 返回当前对象可见区域 宽度与高度 ,返回值 = {wisth:a,left:b};
//.scroll() 返回当前对象被卷区top 和 left。 ,返回值 = {top:a,left:b};
//.offparent() 返回当前对象距离父节点的位置 top left。 ,返回值 = {top:a,left:b};
//.client() 返回当前对象的可用高度和宽度 ,返回值 = {width:a,height:b};
//.screen() 返回当前屏幕的可用高度和宽度 ,返回值 = {width:a,height:b};
//.mouse(event) 返回当前鼠标的x,y坐标,elem不为空返回相对elem的坐标 ,返回值 = {x:a,y:b};
例子
//例子: 返回一个ID 为 test 的div 的可见区域宽度 //jelle('test').inner().width //这里可以紧接后面直接下 width
基于jquery的源码
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .jelle_box{ margin:10px; border:5px solid #000; padding:10px; overflow:scroll;} .o{height:100px;} .t{height:100px;} .h{height:100px;} #jieshao li{ white-space:pre;} #jieshao li li{ padding:0; margin:0;} </style> </head> <script type="text/javascript" src="jquery-1.4.2.js"></script> <body> <dl> <dt>介绍</dt> <dd>解决各个浏览器下 获取dom 元素的 位置</dd> <dd>兼容性</dd> <dd>ie 6 7 8 firefox 3.6 chrome 4.0 目前只测试了这几个浏览器 </dd> <dt>作者</dt> <dd>Jelle ・ lu QQ:271412542 Email:[email protected] blogs:http://www.cnblogs.com/idche/</dd> <dt>源码说明</dt> <dd>jquery 源码给我很大帮助,也用到一个叫 布鲁斯 ・ 李 的同学的源码,当然更多资源来源于网络。</dd> <dt>功能说明</dt> <dd> <ul id="jieshao"> <li>// jelle(elem) 对象 elem传递对象ID 或者 dom对象 如果是窗口 传递 window 对象</li> <li>//.offset() 返回当前对象相对浏览器的绝对位置 ,返回值 = {top:a,left:b};</li> <li>//.inner() 返回当前对象可见区域 宽度与高度 ,返回值 = {wisth:a,left:b};</li> <li>//.scroll() 返回当前对象被卷区top 和 left。 ,返回值 = {top:a,left:b};</li> <li>//.offparent() 返回当前对象距离父节点的位置 top left。 ,返回值 = {top:a,left:b};</li> <li>//.client() 返回当前对象的可用高度和宽度 ,返回值 = {width:a,height:b};</li> <li>//.screen() 返回当前屏幕的可用高度和宽度 ,返回值 = {width:a,height:b};</li> <li>//.mouse(event) 返回当前鼠标的x,y坐标,elem不为空返回相对elem的坐标 ,返回值 = {x:a,y:b}; </li> </ul> </dd> <dt>例子</dt> <dd>//例子: 返回一个ID 为 test 的div 的可见区域宽度 //jelle('test').inner().width //这里可以紧接后面直接下 width</dd> </dl> <textarea id="jelle_code" style="width:300px; height:50px;">jelle('t').offset().top</textarea> <input type="button" value="运行代码" onclick="alert(eval(document.getElementById('jelle_code').value))" /> <div class="jelle_box o" id="o"> div.id=o <div class="jelle_box t" id="t"> div.id=t <br/> <br/> <div class="jelle_box h" id="h">div.id=h <br>OK 这里是一个测试的地方。他包含3个DIV嵌套<br/><br/><br/><br/></div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> </div> <br/><br/><br/><br/> </div> <script type="text/javascript"> //****介绍 //解决各个浏览器下 获取dom 元素的 位置 //****兼容性 // ie 6 7 8 firefox 3.6 chrome 4.0 目前只测试了这几个浏览器 //*****作者 // Jelle ・ lu QQ:271412542 Email:[email protected] blogs:http://www.cnblogs.com/idche/ //*****源码说明 // jquery 源码给我很大帮助,当然更多资源来源于网络。 //*****功能说明 // jelle(elem) 对象 elem传递对象ID 或者 dom对象 如果是窗口 传递 window 对象 //.offset() 返回当前对象相对浏览器的绝对位置 ,返回值 = {top:a,left:b}; //.inner() 返回当前对象可见区域 宽度与高度 ,返回值 = {wisth:a,left:b}; //.scroll() 返回当前对象被卷区top 和 left ,返回值 = {top:a,left:b}; //.offparent() 返回当前对象距离父节点的位置 top left ,返回值 = {top:a,left:b}; //.client() 返回当前对象的可用高度和宽度 ,返回值 = {width:a,height:b}; //.screen() 返回当前屏幕的可用高度和宽度 ,返回值 = {width:a,height:b}; //.mouse(event) 返回当前鼠标的x,y坐标 ,返回值 = {x:a,y:b}; //*****例子 //例子: 返回一个ID 为 test 的div 的可见区域宽度 //jelle('test').inner().width //这里可以紧接后面直接下 width var jelle=function(elem){ // sys 浏览器判断 var sys=(function(){ var sys={},ua=navigator.userAgent.toLowerCase(); //sys.firefox= ua.match(/firefox\/([\d\.]+)/) || false; //后面没有用到所以注销掉 sys.ie= ua.match(/msie\s([\d\.]+)/) || false; //sys.chrome= ua.match(/chrome\/([\d\.]+)/) || false; //后面没有用到所以注销掉 return sys; })(), comStyle=function(obj){ return window.getComputedStyle ? window.getComputedStyle(obj, null) : obj.currentStyle; }, // elem 当前对象 window or other object elem= typeof elem === 'string' ? document.getElementById(elem) : elem === undefined ? window : elem, isie=/^6.0|7.0|8.0$/.test(sys.ie[1]),//是否IE 浏览器 isie67=/^6.0|7.0$/.test(sys.ie[1]), db=document.body, dd=document.documentElement, _this={}; //对象距离浏览器对0 0点的距离 _this.offset=function(o){ //感谢 糖粒子 告诉我这个方法 //有了这个方法至少省略了 15行代码 return (o?o:elem).getBoundingClientRect(); } //当前对象可见区域的宽 高 window _this.inner=function(){ var width,height; //not window object if ( elem !== window ) { var computedStyle=comStyle(elem); width=elem.offsetWidth; height=elem.offsetHeight; //isie=/^6.0|7.0|8.0$/.test(sys.ie[1]), if( isie ){ width-=parseInt(computedStyle.marginTop) || 0; height-=parseInt(computedStyle.marginLeft) || 0; }else{ width-=parseInt(computedStyle.paddingTop) || 0; height-=parseInt(computedStyle.paddingLeft) || 0; } } else{ // window 需要区分浏览器 //isie=/^6.0|7.0|8.0$/.test(sys.ie[1]), if ( isie ){ width=dd.offsetWidth; height=dd.offsetHeight; }else{ //当前elem=window width=elem.innerWidth; height=elem.innerHeight; } } // 返回的数据格式{width:a,height:b} return {'width':width,'height':height}; } //获取对象滚动条卷去的距离 _this.scroll=function(o){ var _elem = o ? o : elem,top,left; if( _elem === window){ top=db.scrollTop+dd.scrollTop; left=db.scrollLeft+dd.scrollLeft; }else{ top=_elem.scrollTop || 0; left=_elem.scrollLeft || 0; } return { 'top':top , 'left':left }; } //获取对象距离父节点的 位置 _this.offparent=function(){ return {'top':_this.offset(elem).top - _this.offset(elem.parentNode).top, 'left':_this.offset(elem).left - _this.offset(elem.parentNode).left }; } //当前对象的可用高度与宽度 _this.client=function(){ return elem==window ? {'width':db.clientWidth,'height':db.clientHeight} : {'height':elem.scrollWidth,'height':elem.scrollHeight}; } //屏幕可用工作区宽度高度 _this.screen=function(){ return {'width':window.screen.availWidth,'height':window.screen.availHeight,} } //获取当前鼠标的位置 _this.mouse=function (e){//获取鼠标坐标 请传递evnet参数 var e = window.event || e, p=(e.pageX || e.pageY)?{ x:e.pageX, y:e.pageY } : { x:e.clientX + db.scrollLeft - db.clientLeft, y:e.clientY + db.scrollTop - db.clientTop }; return elem === window ? p : {x:p.y - _this.offset().top, y:p.x - _this.offset().left}; } return _this; } </script> </body> </html>