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

网络编程 2024/11/16 佚名

3 2 1

介绍
解决各个浏览器下获取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="/UploadFiles/2021-04-02/jquery-1.4.2.js"><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>
<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();
//sys.firefox= ua.match(/firefox\/([\d\.]+)/) || false; //后面没有用到所以注销掉
sys.ie= ua.match(/msie\s([\d\.]+)/) || false;
//sys.chrome= ua.match(/chrome\/([\d\.]+)/) || false; //后面没有用到所以注销掉
return sys;
})(),
comStyle=function(obj){
return window.getComputedStyle ? window.getComputedStyle(obj, null) : obj.currentStyle;
},
// elem 当前对象 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={};
//对象距离浏览器对0 0点的距离
_this.offset=function(o){
//感谢糖粒子告诉我这个方法
//有了这个方法至少省略了 15行代码
return (o?o:elem).getBoundingClientRect();
}
//当前对象可见区域的宽高 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 需要区分浏览器
//isie=/^6.0|7.0|8.0$/.test(sys.ie[1]),
if ( isie ){
width=dd.offsetWidth;
height=dd.offsetHeight;
}else{
//当前elem=window
width=elem.innerWidth;
height=elem.innerHeight;
}
}
// 返回的数据格式{width:a,height:b}
return {'width':width,'height':height};
}
//获取对象滚动条卷去的距离
_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 };
}
//获取对象距离父节点的位置
_this.offparent=function(){
return {'top':_this.offset(elem).top - _this.offset(elem.parentNode).top,
'left':_this.offset(elem).left - _this.offset(elem.parentNode).left
};
}
//当前对象的可用高度与宽度
_this.client=function(){
return elem==window ? {'width':db.clientWidth,'height':db.clientHeight} :
{'height':elem.scrollWidth,'height':elem.scrollHeight};
}
//屏幕可用工作区宽度高度
_this.screen=function(){
return {'width':window.screen.availWidth,'height':window.screen.availHeight,}
}
//获取当前鼠标的位置
_this.mouse=function (e){//获取鼠标坐标请传递evnet参数
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>

dom,元素

标签：

dom,元素

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

狼山资源网 Copyright www.pvsay.com

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

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

暂无“获取dom元素那些讨厌的位置封装代码”评论...

www.pvsay.com 狼山资源网

29,905影音资源

44,626技术资源

11,817软件资源

578,645站长资源

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

dom,元素

js和jquery批量绑定事件传参数一(新猪猪原创)

在table中插入多行的js代码(与insertAdjacentHTML相似的功能)

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

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

友情链接

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

dom,元素

js和jquery批量绑定事件传参数一(新猪猪原创)

在table中插入多行的js代码(与insertAdjacentHTML相似的功能)

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

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存