介绍
解决各个浏览器下 获取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>
新闻热点
疑难解答
