快捷導(dǎo)航

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

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

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

介紹
解決各個(gè)瀏覽器下獲取dom 元素的位置
兼容性
ie 6 7 8 firefox 3.6 chrome 4.0 目前只測(cè)試了這幾個(gè)瀏覽器
作者
Jelle · lu QQ:271412542 Email:idche@qq.com blogs:http://www.cnblogs.com/idche/
源碼說(shuō)明
jquery 源碼給我很大幫助，也用到一個(gè)叫布魯斯 · 李的同學(xué)的源碼，當(dāng)然更多資源來(lái)源于網(wǎng)絡(luò)。
功能說(shuō)明
// jelle(elem) 對(duì)象 elem傳遞對(duì)象ID 或者 dom對(duì)象如果是窗口傳遞 window 對(duì)象
//.offset() 返回當(dāng)前對(duì)象相對(duì)瀏覽器的絕對(duì)位置 ,返回值 = {top:a,left:b};
//.inner() 返回當(dāng)前對(duì)象可見(jiàn)區(qū)域寬度與高度 ,返回值 = {wisth:a,left:b};
//.scroll() 返回當(dāng)前對(duì)象被卷區(qū)top 和 left。 ,返回值 = {top:a,left:b};
//.offparent() 返回當(dāng)前對(duì)象距離父節(jié)點(diǎn)的位置 top left。 ,返回值 = {top:a,left:b};
//.client() 返回當(dāng)前對(duì)象的可用高度和寬度 ,返回值 = {width:a,height:b};
//.screen() 返回當(dāng)前屏幕的可用高度和寬度 ,返回值 = {width:a,height:b};
//.mouse(event) 返回當(dāng)前鼠標(biāo)的x,y坐標(biāo),elem不為空返回相對(duì)elem的坐標(biāo) ,返回值 = {x:a,y:b};

例子
//例子: 返回一個(gè)ID 為 test 的div 的可見(jiàn)區(qū)域?qū)挾?//jelle('test').inner().width //這里可以緊接后面直接下 width
基于jquery的源碼

復(fù)制代碼代碼如下:

<!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>無(wú)標(biāo)題文檔</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>解決各個(gè)瀏覽器下 獲取dom 元素的 位置</dd> 
<dd>兼容性</dd> 
<dd>ie 6 7 8 firefox 3.6 chrome 4.0 目前只測(cè)試了這幾個(gè)瀏覽器 </dd> 
<dt>作者</dt> 
<dd>Jelle · lu QQ:271412542 Email:idche@qq.com blogs:http://www.cnblogs.com/idche/</dd> 
<dt>源碼說(shuō)明</dt> 
<dd>jquery 源碼給我很大幫助，也用到一個(gè)叫 布魯斯 · 李 的同學(xué)的源碼，當(dāng)然更多資源來(lái)源于網(wǎng)絡(luò)。</dd> 
<dt>功能說(shuō)明</dt> 
<dd> 
<ul id="jieshao"> 
<li>// jelle(elem) 對(duì)象 elem傳遞對(duì)象ID 或者 dom對(duì)象 如果是窗口 傳遞 window 對(duì)象</li> 
<li>//.offset() 返回當(dāng)前對(duì)象相對(duì)瀏覽器的絕對(duì)位置 ,返回值 = {top:a,left:b};</li> 
<li>//.inner() 返回當(dāng)前對(duì)象可見(jiàn)區(qū)域 寬度與高度 ,返回值 = {wisth:a,left:b};</li> 
<li>//.scroll() 返回當(dāng)前對(duì)象被卷區(qū)top 和 left。 ,返回值 = {top:a,left:b};</li> 
<li>//.offparent() 返回當(dāng)前對(duì)象距離父節(jié)點(diǎn)的位置 top left。 ,返回值 = {top:a,left:b};</li> 
<li>//.client() 返回當(dāng)前對(duì)象的可用高度和寬度 ,返回值 = {width:a,height:b};</li> 
<li>//.screen() 返回當(dāng)前屏幕的可用高度和寬度 ,返回值 = {width:a,height:b};</li> 
<li>//.mouse(event) 返回當(dāng)前鼠標(biāo)的x,y坐標(biāo),elem不為空返回相對(duì)elem的坐標(biāo) ,返回值 = {x:a,y:b}; 
</li> 
</ul> 
</dd> 
<dt>例子</dt> 
<dd>//例子: 返回一個(gè)ID 為 test 的div 的可見(jiàn)區(qū)域?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="運(yùn)行代碼" 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 這里是一個(gè)測(cè)試的地方。他包含3個(gè)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"> 
//****介紹 
//解決各個(gè)瀏覽器下 獲取dom 元素的 位置 
//****兼容性 
// ie 6 7 8 firefox 3.6 chrome 4.0 目前只測(cè)試了這幾個(gè)瀏覽器 
//*****作者 
// Jelle · lu QQ:271412542 Email:idche@qq.com blogs:http://www.cnblogs.com/idche/ 
//*****源碼說(shuō)明 
// jquery 源碼給我很大幫助,當(dāng)然更多資源來(lái)源于網(wǎng)絡(luò)。 
//*****功能說(shuō)明 
// jelle(elem) 對(duì)象 elem傳遞對(duì)象ID 或者 dom對(duì)象 如果是窗口 傳遞 window 對(duì)象 
//.offset() 返回當(dāng)前對(duì)象相對(duì)瀏覽器的絕對(duì)位置 ,返回值 = {top:a,left:b}; 
//.inner() 返回當(dāng)前對(duì)象可見(jiàn)區(qū)域 寬度與高度 ,返回值 = {wisth:a,left:b}; 
//.scroll() 返回當(dāng)前對(duì)象被卷區(qū)top 和 left ,返回值 = {top:a,left:b}; 
//.offparent() 返回當(dāng)前對(duì)象距離父節(jié)點(diǎn)的位置 top left ,返回值 = {top:a,left:b}; 
//.client() 返回當(dāng)前對(duì)象的可用高度和寬度 ,返回值 = {width:a,height:b}; 
//.screen() 返回當(dāng)前屏幕的可用高度和寬度 ,返回值 = {width:a,height:b}; 
//.mouse(event) 返回當(dāng)前鼠標(biāo)的x,y坐標(biāo) ,返回值 = {x:a,y:b}; 
//*****例子 
//例子: 返回一個(gè)ID 為 test 的div 的可見(jiàn)區(qū)域?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; //后面沒(méi)有用到所以注銷(xiāo)掉 
sys.ie= ua.match(/msie\s([\d\.]+)/) || false; 
//sys.chrome= ua.match(/chrome\/([\d\.]+)/) || false; //后面沒(méi)有用到所以注銷(xiāo)掉 
return sys; 
})(), 
comStyle=function(obj){ 
return window.getComputedStyle ? window.getComputedStyle(obj, null) : obj.currentStyle; 
}, 
// elem 當(dāng)前對(duì)象 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={}; 
//對(duì)象距離瀏覽器對(duì)0 0點(diǎn)的距離 
_this.offset=function(o){ 
//感謝 糖粒子 告訴我這個(gè)方法 
//有了這個(gè)方法至少省略了 15行代碼 
return (o?o:elem).getBoundingClientRect(); 
} 
//當(dāng)前對(duì)象可見(jiàn)區(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{ 
//當(dāng)前elem=window 
width=elem.innerWidth; 
height=elem.innerHeight; 
} 
} 
// 返回的數(shù)據(jù)格式{width:a,height:b} 
return {'width':width,'height':height}; 
} 
//獲取對(duì)象滾動(dòng)條卷去的距離 
_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 }; 
} 
//獲取對(duì)象距離父節(jié)點(diǎn)的 位置 
_this.offparent=function(){ 
return {'top':_this.offset(elem).top - _this.offset(elem.parentNode).top, 
'left':_this.offset(elem).left - _this.offset(elem.parentNode).left 
}; 
} 
//當(dāng)前對(duì)象的可用高度與寬度 
_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,} 
} 
//獲取當(dāng)前鼠標(biāo)的位置 
_this.mouse=function (e){//獲取鼠標(biāo)坐標(biāo) 請(qǐng)傳遞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>