• 售前

  • 售后

热门帖子
入门百科

js中getBoundingClientRect( )方法案例详解

[复制链接]
123456806 显示全部楼层 发表于 2021-8-14 14:57:27 |阅读模式 打印 上一主题 下一主题
一.getBoundingClientRect() 解析
  1. getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
复制代码
语法
  1. rectObject = object.getBoundingClientRect();
复制代码


  1. rectObject.top:元素上边到视窗上边的距离;
  2. rectObject.right:元素右边到视窗左边的距离;
  3. rectObject.bottom:元素下边到视窗上边的距离;
  4. rectObject.left:元素左边到视窗左边的距离;
  5. rectObject.width:是元素自身的宽度
  6. rectObject.height是元素自身的高度
复制代码
跨欣赏器兼容

假如需要更好的跨欣赏器兼容性,请利用 window.pageXOffset 和 window.pageYOffset 取代 window.scrollX 和 window.scrollY。不能访问这些属性的脚本可以利用下面的代码:
  1. // For scrollX
  2. (((t = document.documentElement) || (t = document.body.parentNode))
  3.   && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
  4. // For scrollY
  5. (((t = document.documentElement) || (t = document.body.parentNode))
  6.   && 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( )内容请搜索草根技术分享从前的文章或继续欣赏下面的干系文章盼望各人以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作