js中getBoundingClientRect( )方法案例详解

 更新时间:2021-08-05 16:41:57   作者:佚名   我要评论(0)

一.getBoundingClientRect() 解析

getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

语法

rectObject = object.getBou

一.getBoundingClientRect() 解析

getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

语法

rectObject = object.getBoundingClientRect();

在这里插入图片描述

rectObject.top:元素上边到视窗上边的距离;
rectObject.right:元素右边到视窗左边的距离;
rectObject.bottom:元素下边到视窗上边的距离;
rectObject.left:元素左边到视窗左边的距离;
rectObject.width:是元素自身的宽度
rectObject.height是元素自身的高度

跨浏览器兼容

如果需要更好的跨浏览器兼容性,请使用 window.pageXOffset 和 window.pageYOffset 代替 window.scrollX 和 window.scrollY。不能访问这些属性的脚本可以使用下面的代码:

// For scrollX
(((t = document.documentElement) || (t = document.body.parentNode))
  && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
// For scrollY
(((t = document.documentElement) || (t = document.body.parentNode))
  && typeof t.scrollTop == 'number' ? t : document.body).scrollTop

示例

// rect 是一个具有四个属性 left、top、right、bottom 的 DOMRect 对象
注:DOMRect 是 TextRectangle 或 ClientRect 的标准名称,他们是相同的。
var rect = obj.getBoundingClientRect();

到此这篇关于js中getBoundingClientRect( )方法案例详解的文章就介绍到这了,更多相关js中getBoundingClientRect( )内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
  • js getBoundingClientRect() 来获取页面元素的位置
  • javascript 获取元素位置的快速方法 getBoundingClientRect()
  • javascript getBoundingClientRect() 来获取页面元素的位置的代码[修正版]

您可能感兴趣的文章:

相关文章

  • js中getBoundingClientRect( )方法案例详解

    js中getBoundingClientRect( )方法案例详解

    一.getBoundingClientRect() 解析 getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。 语法 rectObject = object.getBou
    2021-08-05
  • Vue生命周期区别详解

    Vue生命周期区别详解

    生命周期分类 vue每个组件都是独立的,每个组件都有一个属于它的生命周期, 从一个组件创建、数据初始化、挂载、更新、销毁,这就是一个组
    2021-08-05
  • Vue之监听方法案例详解

    Vue之监听方法案例详解

    vue中的监听方法 watch 注意 名字 你想监听哪个属性,就要和他起一样的名字 1.作用 用来监听vue实例中的数据变化 可以随时修改状态的变化
    2021-08-05
  • JavaScript平铺数组转树形结构的实现示例

    JavaScript平铺数组转树形结构的实现示例

    目录后台丢来了1w条数据 递归方式非递归方式总结后台丢来了1w条数据 千算万算,还是没有逃过,后台真的就上万条数据一次丢给前端了。好吧
    2021-08-05
  • 使用vue实现手写签名功能

    使用vue实现手写签名功能

    个人实现截图: 安装: npm install vue-esign --save 使用: 1.在main.js中引入 import vueEsign from 'vue-esign' Vue.use(vueEsign
    2021-08-05
  • JavaScript数据类型转换实例(其他类型转字符串、数值型、布尔类型)

    JavaScript数据类型转换实例(其他类型转字符串、数值型、布尔类型)

    前言 什么是数据类型转换? 使用表单、prompt 获取过来的数据默认类型是字符串类型的,此时就不能直接进行加减法运算,而需要转换变量的
    2021-08-05
  • H5微信公众号授权的简单实现步骤

    H5微信公众号授权的简单实现步骤

    前言 昨天因为有一个项目上面需要实现h5微信授权工作。所以花了两个小时来完成这个功能。​ ​ 开始工作前做的准备 流程说明【提前
    2021-08-05
  • Vue封装通用table组件的完整步骤记录

    Vue封装通用table组件的完整步骤记录

    目录前言 为什么需要封装table组件? 第一步:定义通用组件 第二步:父组件与子组件进行render通信 第三步:使用组件 总结 前言 随
    2021-08-05
  • jQuery实现表格行数据滚动效果

    jQuery实现表格行数据滚动效果

    本文实例为大家分享了jQuery实现表格行数据滚动效果的具体代码,供大家参考,具体内容如下 HTML代码: <div class="box"> <div class="b
    2021-08-05
  • Vue3和Electron实现桌面端应用详解

    Vue3和Electron实现桌面端应用详解

    目录Vue CLI 搭建Vue项目Vue项目改造为markdown编辑器Vue CLI Plugin Electron Builder优化功能启动全屏显示修改菜单栏编辑器打开markdonw文
    2021-08-05

最新评论