Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >getBoundingClientReact方法

getBoundingClientReact方法

作者头像
epoos
发布于 2022-06-06 07:46:49
发布于 2022-06-06 07:46:49
40400
代码可运行
举报
文章被收录于专栏:epoos.comepoos.com
运行总次数:0
代码可运行
getBoundingClientRect方法兼容IE7写法
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
rectObject = object.getBoundingClientRect(); // 返回元素的大小及其相对于视口的位置

ie7中的getBoundingClientRect方法只有bottom、left、right、top属性,没有width合height

通过上图可以看出: 除了width和height,其它几个属性都是相对于视口的左上角而言的。

根据left、right的值可以推算出width

根据top、bottom的值可以推算出height

完整的代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**
 * getBoundingClientRect 兼容IE7
 * @param {DOM Object} obj 
 */
function getBoundingClientRect(obj) {
    var boundingClientRect = obj.getBoundingClientRect();
    var newObj = {
        bottom: boundingClientRect.bottom,
        left: boundingClientRect.left,
        right: boundingClientRect.right,
        top: boundingClientRect.top
    }

	if (boundingClientRect.width) {
		newObj.width = boundingClientRect.width;
		newObj.height = boundingClientRect.height;
	} else {
		newObj.width = boundingClientRect.right - boundingClientRect.left;
		newObj.height = boundingClientRect.bottom - boundingClientRect.top;
    }
	return newObj;
}

相关链接

getBoundingClientRect

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-03-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
getBoundingClientRect使用指南
主要介绍getBoundingClientRect的基本属性,以及具体的使用场景和一些需要注意的问题。
Tiffany_c4df
2019/09/04
1.5K0
getBoundingClientRect使用指南
jQuery源码解析之offset()
解析: 由于$().offset()没有参数,所以源码里的两个 if 可以忽略,所以offset()的本质即:
进击的小进进
2022/03/28
1.3K0
jQuery源码解析之offset()
彻底玩转图片懒加载及底层实现原理
图片懒加载其实已经是一个近乎“烂大街”的词语了,在大大小小的面试中也会被频繁的问到,我在之前的面试中也被问到了图片懒加载的原因、实现方式及底层原理,但由于自己平时很少做“图片”相关的处理,对于“懒加载”也是知之甚少,所以在面试中问答的也不是很好。
前端森林
2021/02/03
1K0
彻底玩转图片懒加载及底层实现原理
头条秋招面试题以及答案
答案: 定义 3D 转换,只是用 Z 轴的值。 拓展: transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
前端迷
2018/12/10
7120
头条秋招面试题以及答案
Canvas 上实现坐标定位
我们顺便还显示了一个拖拽的功能,当然这个并不是使用 canvas 绘制,后面会讲到。
Jimmy_is_jimmy
2023/09/01
4850
Canvas 上实现坐标定位
IntersectionObserver API 使用教程
网页开发时,常常需要了解某个元素是否进入了"视口"(viewport),即用户能不能看到它。 上图的绿色方块不断滚动,顶部会提示它的可见性。 传统的实现方法是,监听到scroll事件后,调用目标元素(
ruanyf
2018/04/12
2.2K0
IntersectionObserver API 使用教程
懒加载的实现原理
前端工程师在做页面优化的时候,如果页面中是类似图片列表的结构,会考虑使用懒加载(Lazy-Load)技术来优化页面的加载速度,今天就带大家来探究一下懒加载的原理。
挥刀北上
2019/07/19
1.4K0
懒加载的实现原理
DOM、BOM一些兼容性问题
汇集了许多关于DOM和BOM的兼容性问题,主要是关于 IE 浏览器的,考虑到浏览器迭代,这里主要列出了 IE8 以及之后的浏览器版本。 IE8 浏览器在 2008年推出,距现在(2019)已有11年之久,已经是很老的一款浏览器了。但是在一些项目中,可能仍需要考虑到兼容性,如果兼容到 IE8 已经是很兼容了,毕竟该浏览器也几乎没多少市场份额了。多是一些机构或政府部门在使用。而有些兼容性问题也可能是其它浏览器之间的差异,比如 Chrome 和 FireFox 对于鼠标滚轮事件对象的滚轮方向判断方式不同,Chrome使用 wheelDelta,而FireFox 则采用 detail 做判断。下面将一一说明或做补充实现来尽量弥补浏览器之间的差异。其实大部分就是为了兼容 IE 早期浏览器。
多云转晴
2019/10/23
1.7K0
DOM、BOM一些兼容性问题
图片懒加载的原理
对于一些资源文件(图片等),只有真正用到的时候才去加载它(发请求),在这之前用体积更小的占位图替代。这么一来就为用户节省了不必要的流量开销。
kyrieliu
2020/07/01
7880
图片懒加载的原理
5 个 JavaScript “罕见”原生的 API
一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第7天,点击查看活动详情。
掘金安东尼
2022/09/19
4670
5 个 JavaScript “罕见”原生的 API
答题卡生成与打印
OpenCV可以用来生成,但是文字换行等场景就比较难实现,这里使用HTML生成答题卡。
码客说
2022/09/09
4.4K1
答题卡生成与打印
JavaScript 获取鼠标及元素在页面上的位置
HTML5学堂:JavaScript获取鼠标的位置,大家会想到clientX/Y等属性,灵活的获取鼠标的位置信息,能够便于我们实现各种复杂的页面交互效果,到底还有哪些属性可以获取鼠标的位置信息?另外,还有哪些能快速获取标签在页面中的位置信息? 在书写一些“拖拽”页面交互效果,比如常见的拖拽效果、自定滚动条、放大镜等效果,都需要用到了鼠标或元素在页面上的位置信息。为了能够快速、灵活的获取鼠标位置信息,今天要带着大家来接触的不是利用clientX/Y获取鼠标的位置信息,而是利用了大家可能比较少用的两个属性lay
HTML5学堂
2018/03/13
4K0
JavaScript 获取鼠标及元素在页面上的位置
向Zepto学习关于"偏移"的那些事
title: 向Zepto学习关于偏移的那些事 date: 2017-12-10 23:06:15
IMWeb前端团队
2019/12/03
3990
向Zepto学习关于"偏移"的那些事
根据文章内容总结的摘要
IMWeb前端团队
2017/12/29
9700
向Zepto学习关于"偏移"的那些事
图片拖拽在项目中的实现
公司目前在做一个任务宝的项目,主要是用公众号举行一些活动,通过公众号推送活动的海报,海报上面附有公众号的二维码,当用户扫码进入公众号以后,提示用户需要完成一定数量的分享即可免费赠送相关礼品等等,活动的主要目的是为了涨粉。
越陌度阡
2020/11/26
6220
面试官问:如何判断一个元素是否在可视区域?
最近在参加面试找工作,陆陆续续的面了两三家。其中一个面试官问到了一个问题:如何判断一个元素是否在可视区域?由于平时处理的不多,所以一时没有回答出来,后来研究了下,所以有了这篇文章。
用户8921923
2022/10/24
3.4K0
面试官问:如何判断一个元素是否在可视区域?
图片懒加载的几种实现方式
Lazyload 可以加快网页访问速度,减少请求,实现思路就是判断图片元素是否可见来决定是否加载图片。当图片位于浏览器视口 (viewport) 中时,动态设置 <img> 标签的 src 属性,浏览器会根据 src 属性发送请求加载图片。
李振
2021/11/26
2.8K0
图片懒加载的几种实现方式
【JS】322- 手把手教你实现前端惰性加载
在实际的项目开发中,我遇到了一个这样的需求:一个页面模块有很多列表数据展示,每条数据都带有图片,而首次展示的图片只需要不到10张,那么我们还要一次性把所有图片都加载出来吗?显然这是不对的,不仅影响页面渲染速度,还浪费带宽(因为需要对列表进行拖动排序,需加载出全部列表,不能做分页)。我们可以在浏览器滚动到一定的位置的时候进行下载,这也就是们通常所说的惰性加载,技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。
pingan8787
2019/08/20
1.1K0
【JS】322- 手把手教你实现前端惰性加载
js判断元素在某个区域内是否可见(转)
getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)。
山河木马
2019/03/05
7.9K0
clientWidth,offsetWidth,scrollWidth你分的清吗
最近在开发时遇到这样一个需求,一个表单列表报错后,滚动表单到能展示报错元素,做的时候发现clientWidth,offsetWidth,scrollWidth这几个概念自己有时候还是会弄混,所以想写篇文章记录一下。
Jou
2022/11/12
2.5K0
clientWidth,offsetWidth,scrollWidth你分的清吗
相关推荐
getBoundingClientRect使用指南
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验