获取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>
Javascript 相关文章推荐
再论Javascript下字符串连接的性能
Mar 05 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 Javascript
JavaScript驾驭网页-DOM
Mar 24 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 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
You might like
Thinkphp中Create方法深入探究
2014/06/16 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
jQuery live
2009/05/15 Javascript
javascript 全角转换实现代码
2009/07/17 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
Python实现的tab文件操作类分享
2014/11/20 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
python3去掉string中的标点符号方法
2019/01/22 Python
Python二维码生成识别实例详解
2019/07/16 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
Python列表推导式实现代码实例
2020/09/09 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
Python中的流程控制详解
2021/02/18 Python
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
计算机专业毕业生求职信分享
2013/12/24 职场文书
赡养老人协议书
2014/04/21 职场文书
医院保洁员管理制度
2015/08/05 职场文书
保外就医申请书范文
2015/08/06 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
Python进程间的通信之语法学习
2022/04/11 Python