获取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 相关文章推荐
分享别人写的一个小型js框架
Aug 13 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
谷歌地图打不开的解决办法
Aug 07 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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
虫族 Zerg 魔法科技
2020/03/14 星际争霸
详细介绍PHP应用提速面面观
2006/10/09 PHP
php 读取文件乱码问题
2010/02/20 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
php设计模式之委托模式
2016/02/13 PHP
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
javascript实现日期格式转换
2014/12/16 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
django实现后台显示媒体文件
2020/04/07 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
班班通项目实施方案
2014/02/25 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
行政申诉状范文
2015/05/20 职场文书