获取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">

　　<head>

　　<title>无标题文档</title>

　　.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>

　　<body>

　　<dl>

　　<dd>解决各个浏览器下获取dom 元素的位置</dd>

　　<dd>ie 6 7 8 firefox 3.6 chrome 4.0 目前只测试了这几个浏览器 </dd>

　　<dd>Jelle · lu QQ:271412542 Email:[email protected] blogs:http://www.cnblogs.com/idche/</dd>

　　<dd>jquery 源码给我很大帮助，也用到一个叫布鲁斯 · 李的同学的源码，当然更多资源来源于网络。</dd>

　　<dd>

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

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

　　div.id=o

　　div.id=t

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

　　</div>

　　//****介绍

　　//解决各个浏览器下获取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>

教程首页更多教程