zoukankan      html  css  js  c++  java
  • 用getBoundingClientRect()来获取页面元素的位置

    以前绝大多数的使用下面的代码来获取页面元素的位置:

    [code=”javascript”]var _x = 0, _y = 0;
    do{
    _x += el.offsetLeft;
    _y += el.offsetTop;
    }while(el=el.offsetParent);
    return {x:_x,y:_y};[/code]

    这里有个”offsetParent”问题,所以要写很多兼容的代码,经过不懈的查找终于找到getBoundingClientRect();该方法获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,他返回的是一个对象,即Object,该对象有是个属性:top,left,right,bottom;这里的top、left和css中的理解很相似,但是right,bottom和css中的理解有点不一样,看示意图:

    以前getBoundingClientRect()是IE特有的,目前FF3+,opera9.5+,safari 4,都已经支持这个方法。

    可以滚动滚动条之后点红色区域看各个值的变化:

    有了这个方法,获取页面元素的位置就简单多了,

    var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;

    var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

  • 相关阅读:
    h5及c3新增的一些内容
    Ajax实现步骤和原理
    prototype和__proto__的关系是什么?
    深拷贝与浅拷贝
    promise与async和await的区别
    ph

    p
    python4
    python3
  • 原文地址:https://www.cnblogs.com/h5monkey/p/6045912.html
Copyright © 2011-2022 走看看