獲取dom元素那些討厭的位置封裝代碼

更新時間：2010年06月23日 11:17:02 作者：

你還在為offset,scroll,inner,client,screen,mouse發(fā)愁嗎? 頭都大了。而且各個瀏覽器方法還不太一樣。所以往往很浪費我們的時間。于是我產生了寫一個方法用戶專門獲取這樣的數(shù)據(jù)。

介紹
解決各個瀏覽器下獲取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 源碼給我很大幫助，也用到一個叫布魯斯 · 李的同學的源碼，當然更多資源來源于網(wǎng)絡。
功能說明
// jelle(elem) 對象 elem傳遞對象ID 或者 dom對象如果是窗口傳遞 window 對象
//.offset() 返回當前對象相對瀏覽器的絕對位置 ,返回值 = {top:a,left:b};
//.inner() 返回當前對象可見區(qū)域寬度與高度 ,返回值 = {wisth:a,left:b};
//.scroll() 返回當前對象被卷區(qū)top 和 left。 ,返回值 = {top:a,left:b};
//.offparent() 返回當前對象距離父節(jié)點的位置 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 的可見區(qū)域寬度 //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 源碼給我很大幫助，也用到一個叫 布魯斯 · 李 的同學的源碼，當然更多資源來源于網(wǎng)絡。</dd> 
<dt>功能說明</dt> 
<dd> 
<ul id="jieshao"> 
<li>// jelle(elem) 對象 elem傳遞對象ID 或者 dom對象 如果是窗口 傳遞 window 對象</li> 
<li>//.offset() 返回當前對象相對瀏覽器的絕對位置 ,返回值 = {top:a,left:b};</li> 
<li>//.inner() 返回當前對象可見區(qū)域 寬度與高度 ,返回值 = {wisth:a,left:b};</li> 
<li>//.scroll() 返回當前對象被卷區(qū)top 和 left。 ,返回值 = {top:a,left:b};</li> 
<li>//.offparent() 返回當前對象距離父節(jié)點的位置 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 的可見區(qū)域寬度 
//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 源碼給我很大幫助,當然更多資源來源于網(wǎng)絡。 
//*****功能說明 
// jelle(elem) 對象 elem傳遞對象ID 或者 dom對象 如果是窗口 傳遞 window 對象 
//.offset() 返回當前對象相對瀏覽器的絕對位置 ,返回值 = {top:a,left:b}; 
//.inner() 返回當前對象可見區(qū)域 寬度與高度 ,返回值 = {wisth:a,left:b}; 
//.scroll() 返回當前對象被卷區(qū)top 和 left ,返回值 = {top:a,left:b}; 
//.offparent() 返回當前對象距離父節(jié)點的位置 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 的可見區(qū)域寬度 
//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(); 
} 
//當前對象可見區(qū)域的寬 高 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 需要區(qū)分瀏覽器 
//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; 
} 
} 
// 返回的數(shù)據(jù)格式{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 }; 
} 
//獲取對象距離父節(jié)點的 位置 
_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}; 
} 
//屏幕可用工作區(qū)寬度高度 
_this.screen=function(){ 
return {'width':window.screen.availWidth,'height':window.screen.availHeight,} 
} 
//獲取當前鼠標的位置 
_this.mouse=function (e){//獲取鼠標坐標 請傳遞evnet參數(shù) 
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>