JavaScript中getBoundingClientRect()方法详解

getBoundingClientRect()

这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。

var box=document.getElementById('box'); // 获取元素

alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离

alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离

alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离

alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离

注意：IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，我们需要做个兼容。

document.documentElement.clientTop; // 非IE为0，IE为2

document.documentElement.clientLeft; // 非IE为0，IE为2

functiongGetRect (element) {

var rect = element.getBoundingClientRect();

var top = document.documentElement.clientTop;

var left= document.documentElement.clientLeft;

return{

top : rect.top - top,

bottom : rect.bottom - top,

left : rect.left - left,

right : rect.right - left

}

分别加上外边据、内边距、边框和滚动条，用于测试所有浏览器是否一致。

转载于:https://www.cnblogs.com/nuoyiamy/p/5318314.html

JavaScript中getBoundingClientRect()方法详解相关推荐

javascript中toFixed()方法详解
最近做的项目涉及到金额的计算,有一种方式就是进行四舍五入的规则进行小数点后面的尾数处理,以前一直以为toFixed方法就是四舍五入的,知道一个用户反馈了金额计算的bug我才如梦初醒(亏了一毛钱),才仔 ...
JavaScript中join()方法详解
前言最近到了一个新公司,这边这个部门只有一个真正的前端,其他大部分都是后端,同样我也是,不过本人也会一点前端,不过没有那么精,好久没写前端了,都快忘了差不多了,现在来回顾一下. join()使用教程 ...
numpy中reshape方法详解
numpy中reshape方法详解_zhanggonglalala的博客-CSDN博客_reshape
JavaScript中的this详解
前言 this JavaScript中的this详解 this详解 This的指向有几种情况?如何人为控制? [谁调用this,this指向谁!!] [this的指向,不关心this写在哪 ...
Pandas中resample方法详解
Pandas中resample方法详解 Pandas中的resample,重新采样,是对原样本重新处理的一个方法,是一个对常规时间序列数据重新采样和频率转换的便捷的方法.重新取样时间序列数据. 方便的 ...
php中魔术方法详解
〝古人学问遗无力,少壮功夫老始成〞php中魔术方法详解,在php中有一类方法,很奇怪常,那就是只要满足一定条件,就会自己执行,那就是php中的魔术方法,码字不易,出精品更难,没有特别幸运,那么请先 ...
Js中apply方法详解说明
Js apply 方法详解我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了, ...
JavaScript中e.keycode详解
概述学过javascript(简称js)的朋友应该都知道e.keycode事件在网页中有着重要作用,下面分享一下关于e.keycode的具体应用和详解实例 1.获取按下的键盘按键Unicode值: ...
python中new方法详解及_Python中new方法的详解
new_ 方法是什么? __new__方法其实就是创建对象的方法 new()方法是在类准备将自身实例化时调用. 一个类可以有多个位置参数和多个命名参数,而在实例化开始之后,在调用 init()方法之前 ...

JavaScript中getBoundingClientRect()方法详解

JavaScript中getBoundingClientRect()方法详解

JavaScript中getBoundingClientRect()方法详解相关推荐

最新文章

热门文章