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

2024-09-06 12:45:41

字體：大中小

來源：轉載

供稿：網(wǎng)友

介紹
解決各個瀏覽器下獲取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>