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

2019-06-06 00:46:48刘景俊

<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();