获取元素距离浏览器周边的位置的方法getBoundingClientRect
更新时间：2013年04月17日 11:40:15 作者：
本文为大家介绍下如何使用getBoundingClientRect()方法获取元素距离浏览器周边的位置，有类似问题的朋友可以参考下哈，希望对你学习js有所帮助
复制代码 代码如下:
var box = document.getElementById( "gaga1" );
/* alert( box.getBoundingClientRect().top );
alert( box.getBoundingClientRect().right );
alert( box.getBoundingClientRect().bottom );
alert( box.getBoundingClientRect().left ) */
function getRect( elements ){
var rect = elements.getBoundingClientRect();
var clientTop = document.documentElement.clientTop;
var clientLeft = document.documentElement.clientLeft;
return { // 兼容ie多出的两个px
top : rect.top - clientTop, // 距离顶部的位置
bottom : rect.bottom - clientTop, // 距离顶部加上元素本身的高度就等于bottom的位置
left : rect.left - clientLeft, // 距离左边的位置
right : rect.right - clientLeft // 距离右边的位置就是 距离左边的位置加上元素本身的宽度
};
};
alert( getRect(box).top )
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了JS执行删除前如何实现判断,需要的朋友可以参考下2014-02-02
这篇文章主要介绍了js生成二维码的示例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-03-03
用了一年时间的TypeScript了,下面这篇文章主要给大家介绍了关于TypeScript中互斥类型实现的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
今天小编就为大家分享一篇layui table复选框禁止某几条勾选的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了uniapp电商小程序实现订单30分钟倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
限制页面显示的字符长度，一直被众多网友倾睬，本人也是一fans利用闲暇时间搜集整理了一些实用技巧,需要了解的朋友可以参考下2012-12-12
js 回车提交一些新手朋友还是比较陌生的，本文介绍两种实现方法:jQuery方法、JavaScript方法,感兴趣的朋友可以研究下2012-12-12
这篇文章主要介绍了js点击按钮实现带遮罩层的弹出视频效果,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了es6 symbol的实现方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
本文主要介绍了TypeScript基本数据类型的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
最新评论