getBoundingClientRect介绍

getBoundingClientRect获取元素位置

getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)。

该函数返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height;这里的top、left和css中的理解很相似,width、height是元素自身的宽高,但是right,bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最上面的距离。

getBoundingClientRect()最先是IE的私有属性,现在已经是一个W3C标准。所以你不用当心浏览器兼容问题,不过还是有区别的:IE只返回top,lef,right,bottom四个值,不过可以通过以下方法来获取width,height的值

var ro = object.getBoundingClientRect();
var Width = ro.right - ro.left;
var Height = ro.bottom - ro.top; //兼容所有浏览器写法: var ro = object.getBoundingClientRect();
var Top = ro.top;
var Bottom = ro.bottom;
var Left = ro.left;
var Right = ro.right;
var Width = ro.width||Right - Left;
var Height = ro.height||Bottom - Top; //有了这个方法,获取页面元素的位置就简单多了: var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

getBoundingClientRect判断元素是否在可视区域

以前的办法是通过各种offset判断元素是否可见,网上很多教程,大家可以自己去查找。 getBoundingClientRect是获取可视区域相关位置信息的,使用这个属性来判断更加方便:

function isElementInViewport (el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
);
}

getBoundingClientRect兼容性

目前来说兼容性还是不错的,但是使用前还是查看一下caniuse比较好。

[转] getBoundingClientRect判断元素是否可见的更多相关文章

  1. 如何判断元素是否在可视区域内--getBoundingClientRect

    介绍 Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置. 根据MDN文档 getBoundingClientRect 方法返回的是一个DOMRect ...

  2. 如何判断元素是否在可视区域ViewPort

    个性签名: 生如夏花,逝如冬雪:人生如此,何悔何怨. 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth,clientWidth,scrollWidth,scrollTop这几个 ...

  3. javascript判断元素存在和判断元素存在于实时的dom中的方法

    今天(周六)下午我在公司加班时不知道要干什么,就打开公司的一个wordpress项目网站,想看下之前自己做的一个网页是否有问题. 打开网站首页,我习惯性的打开了chrome的调试工具,然后鼠标开始滚动 ...

  4. JQuery判断元素是否存在

    JQuery判断元素是否存在的原理与javascript略有不同,因为$选择器选择的元素无论是否存在都不会返回null或undefined,要使用JQuery判断元素是否存在,只能使用length属性 ...

  5. jQuery如何判断元素是否是隐藏的?

    jQuery函数简介: is(expr) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true. 如果没有元素符合,或者表达式无效,都返回'false'. 注 ...

  6. jQuery判断元素是否存在方法总结

    在jquery中判断元素是否存在我们可使用$("#div").length > 0)来判断了,意思就是判断元素长度了,如果没有肯定是不存在的哦,下面我来介绍介绍. 使用传统j ...

  7. jQuery判断元素是否存在方法

    1.使用javascript判断元素是否存在 if(document.getElementById('div')) { } else { } 2.使用jquery判断元素是否存在 if ($(&quo ...

  8. jquery判断元素是否隐藏的多种方法

    第一种:使用CSS属性 复制代码 代码如下: var display =$('#id').css('display'); if(display == 'none'){    alert("被 ...

  9. jQuery判断元素是否是隐藏的代码

    if($("#elem_id").is(":hidden")) { } 实例代码1: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC & ...

随机推荐

  1. <TCP/IP>记一次关于IP地址和MAC物理地址的思考

    是的,从3月6日第一次上计算机网络课起,我还是今天第一次对这本书里讲的知识点有了自己的疑问..之前看书就是 嗯嗯这好像很有道理,嗯嗯也许再多看几章就知道它在讲什么了.. 不过今天已经自学到了网络层了, ...

  2. 021_supervise进行管理利器

    一.公司的类似ansible的工具也是用supervise管理的 [admin@mjyall-test-1 /service/ansible-oc-agent]$ ps -ef|grep 19070 ...

  3. $Django patch与put,视图组件,路由控制,响应器

    1 patch与put(幂等?回顾) PATCH 与 PUT 属性上的一个重要区别还在于:PUT 是幂等的,而 PATCH 不是幂等的.幂等是一个数学和计算机学概念,在计算机范畴内表示一个操作执行任意 ...

  4. docker简单入门之使用docker容器部署简单的java web开源项目jpress博客程序

    一.在centos7.3上安装docker 前置条件 x86_64-bit 系统 kernel 3.10+ .检查内核版本,返回的值大于3.10即可 [root@node1 ~]# uname -r ...

  5. [WebRTC/JsSIP] AUDIO RTP REPORTS ERROR: [Remote Address Error!]

    问题描述: 在使用FreeSWITCH WebRTC 测试时,FS回复  502 Bad Gateway.查看FS日志 [DEBUG] switch_core_media.c:5147 AUDIO R ...

  6. 【原创】大叔经验分享(36)CM部署kafka

    1 下载kafka parcel http://archive.cloudera.com/kafka/parcels/latest/KAFKA-3.1.1-1.3.1.1.p0.2-el7.parce ...

  7. 异步io模块

    '''客户端''' import socket,select #####进行封装,将socket对象和要返回的url,和回调函数进行一下封装 class Httprequest(): def __in ...

  8. CSS rem长度单位

    1. 概述 1.1 说明 rem是css3中新增的一个单位属性(font size of the root element),根据页面的根节点(html)的字体大小进行转换的单位,通过此单位属性可以进 ...

  9. jquery中的attr与prop的区别,什么时候用attr,什么时候用prop

    只要有 Boolean() 属性的,简单说就是具有true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),(其实这些都是表单类的), ...

  10. oracle 根据一个时间段获取这个时间段内所有月份、天数、日期

    注:本文来源于< oracle 根据一个时间段获取这个时间段内所有月份.天数.日期 > 获取月份列表: SELECT TO_CHAR(ADD_MONTHS(TO_DATE('2014-10 ...