首頁 > web前端 > js教程 > 获取dom元素那些讨厌的位置封装代码_javascript技巧

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

WBOY
發布: 2016-05-16 18:24:34
原創
1035 人瀏覽過

介绍
解决各个浏览器下 获取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的源码

复制代码 代码如下:





无标题文档





介绍

解决各个浏览器下 获取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





div.id=o

div.id=t




div.id=h
OK 这里是一个测试的地方。他包含3个DIV嵌套

























相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板