getBoundingClientRect介绍

dreamtecher 发布于2019-08-23 12:34 / 344人阅读

摘要：用于获取元素相对与浏览器视口的位置由于已经是标准，所以不用担心兼容，不过在下还是有所区别元素顶部相对于视口顶部的距离元素底部相对于视口顶部的距离元素左边相对于视口左边的距离元素右边相对于视口左边的距离元素高度元素宽度兼容写法

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
    }
}

云服务器 GPU云服务器自我介绍平台介绍相关介绍指令介绍

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98743.html

原生 JS 获取元素的尺寸和位置

摘要：如何获取元素的真实尺寸呢通过下，介绍。这个函数主要提供给我们元素和宽度在内的一系列值仍然不要妄想通过获得，加上原先的，就可以减去和的值获得元素的真实尺寸。关于元素的尺寸和位置，这原本是 CSS 干的事，但更多的时候需要用 JavaScript 来获取这些参数，比如一个很好的例子 js 实现的图片瀑布流。 showImg(https://segmentfault.com/img/bVG...

simon_chen 2019-08-22 10:47 评论0 收藏0
【前端词典】5 种滚动吸顶实现方式的比较[性能升级版]

摘要：用于获得当前元素到定位父级顶部的距离偏移值。后来在项目中总会遇到滚动吸顶的效果需要实现，现在我将我知道的种滚动吸顶实现方式做详细介绍。有兼容性问题，在微信浏览器某些版本中的值会为，于是乎也就有了第三种方案的兼容性写法。修改版预览这篇文章是三天前写就的，有大佬给我提了一些修改意见，我觉得这个意见确实中肯。所以就有了这个升级的修改版本。代码同步更新到 GitHub 了。修改内容如下：添加...

happyfish 2019-05-23 17:31 评论0 收藏0
手把手教你撸个vue2.0弹窗组件

摘要：组件结构同组件结构通过方法获取元素的大小及其相对于视口的位置，之后对提示信息进行定位。可以用来进行一些复杂带校验的弹窗信息展示，也可以只用于简单信息的展示。可以通过属性来显示任意标题，通过属性来修改显示区域的宽度。手把手教你撸个vue2.0弹窗组件在开始之前需要了解一下开发vue插件的前置知识，推荐先看一下vue官网的插件介绍预览地址 http://haogewudi.me/k...

mrli2016 2019-08-20 18:36 评论0 收藏0
手把手教你撸个vue2.0弹窗组件

摘要：组件结构同组件结构通过方法获取元素的大小及其相对于视口的位置，之后对提示信息进行定位。可以用来进行一些复杂带校验的弹窗信息展示，也可以只用于简单信息的展示。可以通过属性来显示任意标题，通过属性来修改显示区域的宽度。手把手教你撸个vue2.0弹窗组件在开始之前需要了解一下开发vue插件的前置知识，推荐先看一下vue官网的插件介绍预览地址 http://haogewudi.me/k...

taoszu 2019-08-29 13:07 评论0 收藏0