js 获取 对对象相对于页面四边的距离

转载 2015年11月18日 16:40:01

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

    }

}

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

js各种距离区分

2. 小小总结一小下" title="clientWidth/scrollWidth/offsetWidth 小小总结一小下" style="margin:0px; padding:0px; bor...
  • Christine95
  • Christine95
  • 2016年03月12日 21:06
  • 612

js中如何获取某个元素到浏览器最左和最右的距离

1.解决办法我们可以先获取它的offset它这是相对父容器的距离。然后使用递归来层层获取上一级的offset var getOffsetLeft = function(obj){        ...
  • yinbucheng
  • yinbucheng
  • 2016年12月29日 17:24
  • 4220

js获取元素相对于父元素的位移,获取元素本身的宽高

js获取元素相对于父元素的位移,获取元素本身的宽高 1. offsetLeft 、offsetTop 用于获取子元素相对于父元素的位移(左位移、上位移) console.log(oNode.offs...
  • xiaobing_hope
  • xiaobing_hope
  • 2016年04月10日 22:13
  • 7386

js 获取 对对象相对于页面四边的距离

getBoundingClientRect()     这个方法返回一个矩形对象,包含四个属性:left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。   var ...
  • huhuliuxia
  • huhuliuxia
  • 2015年11月18日 16:40
  • 1881

获取元素离文档各边的距离

function getDistance(obj){ var distance={}; distance.top=($(obj).offset().top-$(document).scroll...
  • apollokk
  • apollokk
  • 2014年07月13日 00:12
  • 1722

获得元素相对于当前窗口的上下左右位置

object.getBoundingClientRect().top/left/bottom/right可以获得元素相对于当前窗口的上下左右位置。 测试代码: /* FF:doc...
  • Gogo_leee
  • Gogo_leee
  • 2016年02月26日 23:43
  • 593

js获取元素div相对body的距离

如何取到页面中任意某个Html元素与body元素之间的偏移距离? offsetTop和offsetLeft 这两个属性,IE 、Opera和Firefox对它俩的解释存在差异: IE5.0+ ...
  • jazywoo123
  • jazywoo123
  • 2012年08月15日 22:50
  • 5004

获取盒子的实际位置

在元素的定位中经常出错,学习了一段时间,今天来总结一下其中遇到的一些问题 其中obj.offsetLeft指的是一个元素的计算后的位置==盒模型的尺寸: 1.offsetWidth=css宽+pa...
  • qq_24997339
  • qq_24997339
  • 2016年04月25日 23:33
  • 743

如何在html5中确定外边距,内边距并将其消去

先将每个封装的页面设置边框,设置较鲜明的颜色,设置边框的像素,使其显眼,然后去判断是外边距,还是内边距外边距是指边框与边框之间的距离内边框是指边框与内容之间的距离如果是外边距,可用margin:0px...
  • Como0413
  • Como0413
  • 2018年01月18日 10:19
  • 66

获取元素到页面的距离

* { margin: 0; padding: 0; } .father { width: 500px; height: 500px; background: pink; marg...
  • can_Sunshine
  • can_Sunshine
  • 2016年11月23日 15:02
  • 720
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js 获取 对对象相对于页面四边的距离
举报原因:
原因补充:

(最多只允许输入30个字)