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

2014-10-23 11:56:56 分类：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坐标,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技术：获取dom元素那些讨厌的位置封装代码，转载需保留来源！

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

标签：

相关文章阅读

5款Javascript颜色选择器5款Javascript颜色选择器
11款基于Javascript的文件管理器11款基于Javascript的文件管理器
JavaScript 对话框和状态栏使用说明JavaScript 对话框和状态栏使用说明
禁止在图片上使用右键禁止在图片上使用右键