js中getBoundingClientRect( )方法案例详解

一.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( )内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • js getBoundingClientRect() 来获取页面元素的位置

    js getBoundingClientRect() 来获取页面元素的位置

    document.documentElement.getBoundingClientRect 下面这是MSDN的解释: Syntax oRect = object.getBoundingClientRect() Return Value Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordina

  • javascript 获取元素位置的快速方法 getBoundingClientRect()

    它返回一个对象,其中包含了left.right.top.bottom四个属性,分别对应了该元素的左上角和右下角相对于浏览器窗口(viewport)左上角的距离. 所以,网页元素的相对位置就是 var X= this.getBoundingClientRect().left; var Y =this.getBoundingClientRect().top; 再加上滚动距离,就可以得到绝对位置 var X= this.getBoundingClientRect().left+document.doc

  • javascript getBoundingClientRect() 来获取页面元素的位置的代码[修正版]第1/2页

    javascript getBoundingClientRect() 来获取页面元素的位置的代码[修正版]第1/2页

    document.documentElement.getBoundingClientRect下面这是MSDN的解释: Syntax oRect = object.getBoundingClientRect()Return Value Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate

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

    js中getBoundingClientRect( )方法案例详解

    一.getBoundingClientRect() 解析 getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置. 语法 rectObject = object.getBoundingClientRect(); 值 rectObject.top:元素上边到视窗上边的距离; rectObject.right:元素右边到视窗左边的距离; rectObject.bottom:元素下边到视窗上边的距离; rectObject.left:元素左边到视窗左边的距离; rect

  • Java BigDecimal中divide方法案例详解

    1.首先说一下用法,BigDecimal中的divide主要就是用来做除法的运算.其中有这么一个方法. public BigDecimal divide(BigDecimal divisor,int scale, int roundingMode) 第一个参数是除数,第二个参数代表保留几位小数,第三个代表的是使用的模式. BigDecimal.ROUND_DOWN:直接省略多余的小数,比如1.28如果保留1位小数,得到的就是1.2 BigDecimal.ROUND_UP:直接进位,比如1.21如

  • vue.js+boostrap项目实践(案例详解)

    vue.js+boostrap项目实践(案例详解)

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

  • 在Node.js中使用Javascript Generators详解

    Generators是Javascript的一种协同程序( coroutine 简称:协程)风格,是指那些可以在执行时暂停然后又恢复的函数,该函数是在functi配以星号符号形式如function* ,函数内有些特征关键词如yield 和yield*. function* generatorFn () { console.log('look ma I was suspended') } var generator = generatorFn() // [1] setTimeout(functio

  • JavaScript函数之call、apply以及bind方法案例详解

    总结 1.相同点 都能够改变目标函数执行时内部 this 的指向 方法的第一个参数用于指定函数执行时内部的 this 值 支持向目标函数传递任意个参数 若不向方法的第一个参数传值或者传递 undefined.null,则在 JavaScript 正常模式下,目标函数内部的 this 指向 window 对象,严格模式下,分别指向 undefined.null. 2.区别 apply() 方法可接收两个参数,而 call() 和 bind() 方法则可接收多个参数. apply() 方法向目标函数

  • react.js框架Redux基础案例详解

    react.js框架Redux基础案例详解

    react.js框架Redux https://github.com/reactjs/redux 安装: npm install redux react-redux #基于react,我们在前面已经安装过了 Redux参考文档: http://redux.js.org/ Redux核心概念:Store 我们可以简单的理解为就是用来存储 各个组件的State或你自己定义的独立的state,对state进行统一读取.更新.监听等操作. http://redux.js.org/docs/basics/

  • JavaScript知识点总结(十一)之js中的Object类详解

    JavaScript知识点总结(十一)之js中的Object类详解

    JavaScript中的Object对象,是JS中所有对象的基类,也就是说JS中的所有对象都是由Object对象衍生的.Object对象主要用于将任意数据封装成对象形式. 一.Object类介绍 Object类是所有JavaScript类的基类(父类),提供了一种创建自定义对象的简单方式,不再需要程序员定义构造函数. 二.Object类主要属性 1.constructor:对象的构造函数. 2.prototype:获得类的prototype对象,static性质. 三.Object类主要方法 1

  • Jquery中$.ajax()方法参数详解

    俗说好记性不如个烂笔头,下面是jquery中的ajax方法参数详解,这里整理了一些供大家参考. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持. 3.timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设置. 4.async:

  • nodejs 使用 js 模块的方法实例详解

    Intro# 最近需要用 nodejs 做一个爬虫,Google 有一个 Puppeteer 的项目,可以用它来做爬虫,有关 Puppeteer 的介绍网上也有很多,在这里就不做详细介绍了. node 小白,开始的时候有点懵逼,模块导出也不会. 官方文档上说支持 *.mjs 但是还要改文件扩展名,感觉有点怪怪的,就没用,主要是基于js的模块使用. 模块导出的两种方式# 因为对 C# 比较熟悉,从我对 C# 的理解中,将 nodejs 中模块导出分成两种形式: 1.一个要实例化才能调用的模块 2.

  • spring security在分布式项目下的配置方法(案例详解)

    分布式项目和传统项目的区别就是,分布式项目有多个服务,每一个服务仅仅只实现一套系统中一个或几个功能,所有的服务组合在一起才能实现系统的完整功能.这会产生一个问题,多个服务之间session不能共享,你在其中一个服务中登录了,登录信息保存在这个服务的session中,别的服务不知道啊,所以你访问别的服务还得在重新登录一次,对用户十分不友好.为了解决这个问题,于是就产生了单点登录: **jwt单点登录:**就是用户在登录服务登录成功后,登录服务会产生向前端响应一个token(令牌),以后用户再访问系

随机推荐