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. JQ实现全选、全不选

    代码: <table class="table myTable table-hover"> <thead> <tr> <th> &l ...

  2. IoGetTopLevelIrp

    学习写驱动,其实,挺无聊,但是也挺有意思的 IoGetTopLevelIrp 今天在看一个文件系统过滤驱动的时候,看到这个函数,它是干嘛的,为什么会有这么个东西 https://msdn.micros ...

  3. 2019-9-2-win10-uwp-弹起键盘不隐藏界面元素

    title author date CreateTime categories win10 uwp 弹起键盘不隐藏界面元素 lindexi 2019-09-02 12:57:38 +0800 2018 ...

  4. printk函数

    一个不同是 printk 允许你根据消息的严重程度对其分类, 通过附加不同的记录级别或者 优先级在消息上. 你常常用一个宏定义来指示记录级别. 例如, KERN_INFO, 我们之前曾 在一些打印语句 ...

  5. BOM相关知识点

    1.BOM概念:Browser Object Model 浏览器对象模型作用:提供了使用JS操作浏览器的接口 2.BOM包含了许多对象信息,包括如下这些:(1)screen 屏幕信息(2)locati ...

  6. 读《深入PHP 面向对象、模式与实践》笔记

    1. include() 和require() 语句的不同在于它们如何处理错误.使用require()调用文件发生错误时,将会停止整个程序;调用include()时遇到相同的错误,则会生成警告并停止执 ...

  7. jvisualvm图解【转】

    jvisualvm图解[转]   http://blog.csdn.net/a19881029/article/details/8432368 jvisualvm能干什么:监控内存泄露,跟踪垃圾回收, ...

  8. postgresql计算2个日期之间工作日天数的方法

    select date_part( 'day', minus_weekend(begin_date,end_date)) from table1 where name in ('a', 'b', 'c ...

  9. leetcode146周赛-5132-颜色最短的交替路径

    ---恢复内容开始--- 题目描述: class Solution: def shortestAlternatingPaths(self, n: int, red_edges, blue_edges) ...

  10. day07 linux磁盘分区,ps,kill,df,top命令使用

    day07进入单用户模式删除密码不能进入系统问题: SELINUX=disabled 操作系统linux开机流程加电BIOS找到启动介质先读取第一个扇区(MBR)grup找到kernel加载到内存执行 ...