getBoundingClientRect用于获取元素相对与浏览器视口的位置

由于getBoundingClientRect()已经是w3c标准,所以不用担心兼容,不过在ie下还是有所区别

{
top: '元素顶部相对于视口顶部的距离',
bottom: '元素底部相对于视口顶部的距离',
left: '元素左边相对于视口左边的距离',
right: '元素右边相对于视口左边的距离',
height: '元素高度',
width: '元素宽度'
}
// 兼容写法
function getClientReat(client) {
const { top, bottom, left, right, height, width } = client.getBoundingClientRect()
return {
top,
bottom,
left,
right,
height: height || bottom - top,
width: width || right - left
}
}

转载自:https://segmentfault.com/a/1190000016815362

getBoundingClientRect介绍的更多相关文章

  1. [转] getBoundingClientRect判断元素是否可见

    getBoundingClientRect介绍 getBoundingClientRect获取元素位置 getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视 ...

  2. 前端好用API之getBoundingClientRect

    前情 在前端开发需求中,经常需要获取元素的尺寸位置相关的属性,以往的做法是调用不同api获取相关属性的. getBoundingClientRect介绍 getBoundingClientRect() ...

  3. js中getBoundingClientRect()的用法介绍

    平时经常获取一个div的位置,用了定位,取位置还好,在不用定位的情况下,计算一个div在页面的距离,就可以用到getBoundingClientRect()方法. getBoundingClientR ...

  4. 利用getBoundingClientRect方法实现简洁的sticky组件

    补充于2016-03-20: 本文实现有不足,不完美的地方,请在了解本文相关内容后,移步阅读<sticky组件的改进实现>了解更佳的实现. sticky组件,通常应用于导航条或者工具栏,当 ...

  5. 获取元素位置信息:getBoundingClientRect

    一个神奇的方法. 一.历史 偷个懒,上个传送门:http://www.cnblogs.com/2050/archive/2012/02/01/2335211.html 二.介绍 DOM元素方法,返回一 ...

  6. WebBrowser常用属性方法介绍

    WebBrowser 常用属性方法 ■■方法 ==============================  ▲GoBack    相当于IE的"后退"按钮,使你在当前历史列表中后 ...

  7. 聊聊 getClientRects 和 getBoundingClientRect 方法

    开始表演 今天来聊一下两个相似的方法,它们就是:getBoundingClientRect().getClientRects(). 只见它们俩手拉手地登上了舞台,一个鞠躬,便开始滔滔不绝起来. 自述 ...

  8. JQ的offset().top与JS的getBoundingClientRect区别详解,JS获取元素距离视窗顶部可变距离

     壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...

  9. getBoundingClientRect使用指南

    getBoundingClientRect使用指南 author: @TiffanysBear 主要介绍getBoundingClientRect的基本属性,以及具体的使用场景和一些需要注意的问题. ...

随机推荐

  1. 2019-11-9-win10-支持默认把触摸提升-Pointer-消息

    title author date CreateTime categories win10 支持默认把触摸提升 Pointer 消息 lindexi 2019-11-09 15:32:31 +0800 ...

  2. 用 Docker 搭建Sha--dow--sock--s 笔记

    首先得找一台海外服务器,该服务器一定要在海外. 一.在https://my.vultr.com/购买一台海外服务器,亲测选美国Miami速度最稳: 二.系统我选了CentOS 7 x64,在CentO ...

  3. Pascal的sin^-1函数实现

    function unsin(t:real):real; var l,r,ans,mid:longint; function dsin(z:real):real; begin exit(sin(z*p ...

  4. 2016.10.5初中部上午NOIP普及组比赛总结

    2016.10.5初中部上午NOIP普及组比赛总结 这次的题目出得挺有质量的.但我觉得我更应该努力了. 进度: 比赛:0+20+0+0=20 改题:AC+AC+AC+AC=AK kk的作业 这题我错得 ...

  5. Django关于migrate无效的问题

    目录 django关于manage.py migrate无效的问题解决 django关于manage.py migrate无效的问题解决 问题描述: 对于django已有的model,修改之后,想重新 ...

  6. 3、变量+运算符+Scanner

    1.变量 1>开辟内存空间 int num ; 2>赋值 num = 10; 3>使用 num 1*long 类型的特殊 long num = 12L 2*float类型特殊 flo ...

  7. Ionic3 demo TallyBook 实例2

    1.添加插件 2.相关页面 消费页面: <ion-header> <ion-navbar> <ion-title> 消费记录 </ion-title> ...

  8. 面向对象_访问修饰符_构造与析构函数_this指针

    1:面向对象 以codeblocks举例,在一个工程里面: File-->new -->Class可以建一个类,可以设置类的参数,是否有set get方法,有无构造函数等设置,.h文件主要 ...

  9. 正则获取html标签字符串中图片地址

    html标签字符串: var htmlStr = "<div class='testClass'><img=http://www.chinanews.com/part/ho ...

  10. Struts2OGNL

    OGNL: 什么是OGNL  Object Graph Navigation Language 开源项目,取代页面中Java脚本,简化数据访问 和EL同属于表达式语言,但功能更为强大  OGNL在St ...