DOM操作之确定元素大小

IE、Firefox 3+、Safari 4+、Opera 9.5及Chrome为每个元素都提供了一个 getBoundingClientRect() 方法。这个方法返回会一个矩形对象，包含4个属性： left 、 top 、 right 和 bottom 。这些属性给出了元素在页面中相对于视口的位置。但是，浏览器的实现稍有不同。IE8及更早版本认为文档的左上角坐标是(2,2)，而其他浏览器包括IE9则将传统的(0,0)作为起点坐标。因此，就需要在一开始检查一下位于(0,0)处的元素的位置，在IE8及更早版本中，会返回(2,2)，而在其他浏览器中会返回(0,0)。来看下面的函数：

function getBoundingClientRect(element){

if (typeof arguments.callee.offset != “number”){

var scrollTop = document.documentElement.scrollTop;

var temp = document.createElement(“div”);

temp.style.cssText = “position:absolute;left:0;top:0;”;

document.body.appendChild(temp);

arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;

document.body.removeChild(temp);

temp = null;

}

var rect = element.getBoundingClientRect();

var offset = arguments.callee.offset;

return {

left: rect.left + offset,

right: rect.right + offset,

top: rect.top + offset,

bottom: rect.bottom + offset

};

}

这个函数使用了它自身的属性来确定是否要对坐标进行调整。第一步是检测属性是否有定义，如果没有就定义一个。最终的 offset 会被设置为新元素上坐标的负值，

实际上就是在IE中设置为-2，在Firefox和Opera中设置为-0。为此，需要创建一个临时的元素，将其位置设置在(0,0)，然后再调用其 getBoundingClientRect() 。而之所以要减去视口的 scrollTop ，是为了防止调用这个函数时窗口被滚动了。这样编写代码，就无需每次调用这个函数都执行两次 getBoundingClientRect() 了。接下来，再在传入的元素上调用这个方法并基于新的计算公式创建一个对象。

好了，今天的文章就到这里，本文由Web前端精髓为您提供，喜欢的同学记得点击收藏或者点赞哦！

上一节

DOM操作之确定元素大小相关推荐

JS的DOM操作1--获取元素与修改元素(附带动图案例)
1.获取元素与修改元素 https://blog.csdn.net/TroyeSivanlp/article/details/120580055 2.创建自定义属性和节点 https://blog.c ...
jQuery的DOM操作之选择元素
.get() 用jQuery选择器选择出来的元素被包装为jQuery对象,而面对不同的需求可能需要我们获取的有时候是jQuery对象,有时候是原生DOM元素,此时使用get方法进行进一步的选择可获得原 ...
JS的dom操作基础——获取元素
系统提供的方法在H5之前的技术: 1.getElementById("目标元素的id值") 通过标签的id获取,如果未找到返回null. 2.getElementsByClas ...
html中dom多会有影响吗,DOM操作造成的页面卡顿问题及解决
相关目录以下为我总结的其他性能优化点,欢迎参考,指点及吐槽前言界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现的.尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很 ...
python界面卡顿_前端页面卡顿、也许是DOM操作惹的祸？
界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现的.尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很高,页面前端代码的性能瓶颈也大多集中在DOM操作上,所以前端性能优化 ...
前端页面卡顿、也许是DOM操作惹的祸？
界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现的.尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很高,页面前端代码的性能瓶颈也大多集中在DOM操作上,所以前端性能优化 ...
DOM操作造成的页面卡顿问题及解决
前言界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现的.尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很高,页面前端代码的性能瓶颈也大多集中在DOM操作上,所以前端性 ...
19号以后包括数组在内的所有内容（数组、函数、方法、dom操作）
数组: 1.数组就是许多变量,他们的名称和数据类型都是一致的. 数组元素:就是数组里面的每一项 2.数组下标: 数组的下标是0的元素是数组的第一个元素(数组的下标是从0开始的). 3.获取数组的长度: ...
jQuery 之 [ DOM操作 ]
jQuery的DOM操作查找节点元素节点可以通过jQuery选择器来查找元素节点属性节点通过attr()方法来获取指定元素节点的属性节点文本节点通过text()方法来获取指定元素节点的文 ...

DOM操作之确定元素大小

DOM操作之确定元素大小相关推荐

最新文章

热门文章