编程 Javascript

获取dom元素那些讨厌的位置封装代码

Posted in Javascript onJune 23, 2010

介绍
解决各个浏览器下获取dom 元素的位置
兼容性
ie 6 7 8 firefox 3.6 chrome 4.0 目前只测试了这几个浏览器
作者
Jelle · lu QQ:271412542 Email:idche@qq.com 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:idche@qq.com 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:idche@qq.com 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>

获取dom元素那些讨厌的位置封装代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

SharePoint 客户端对象模型 (一) ECMA Script

May 22 Javascript

ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值

Feb 03 Javascript

jquery中html、val与text三者属性取值的联系与区别介绍

Dec 29 Javascript

jquery 页面滚动到底部自动加载插件集合

Jan 31 Javascript

按Enter键触发事件的jquery方法实现代码

Feb 17 Javascript

利用函数的惰性载入提高javascript代码执行效率

May 05 Javascript

jQuery选择器全集详解

Nov 24 Javascript

JS实现的N多简单无缝滚动代码(包含图文效果)

Nov 06 Javascript

jquery常用的12个小功能

Jul 22 Javascript

Vue结合原生js实现自定义组件自动生成示例

Jan 21 Javascript

JS判断数组是否包含某元素实现方法汇总

Jun 24 Javascript

小程序自定义弹框效果

Nov 16 Javascript

jquery ajax 同步异步的执行示例代码

Jun 23 #Javascript

jquery tab插件制作实现代码

Jun 22 #Javascript

jquery多浏览器捕捉回车事件代码

Jun 22 #Javascript

浏览器脚本兼容文本框中,回车键触发事件的兼容

Jun 21 #Javascript

在IE6下发生Internet Explorer cannot open the Internet site错误

Jun 21 #Javascript

复制Input内容的js代码_支持所有浏览器，修正了Firefox3.5以上的问题

Jun 21 #Javascript

js操作时间（年-月-日时-分-秒星期几）

Jun 20 #Javascript