getBoundingClientRect属性研究

news2024/12/23 12:34:23

getBoundingClientRect属性研究

概念

getBoundingClientRect 返回 width、height和下图中的6个属性

请添加图片描述

实测总结:

抓住一个核心点,就是height、width的值:

  • box-sizing 是 content-box时,width和height = 内容+border+padding
  • box-sizing是 border-box时, width和height = 我们设置的width、height

所以:

  • top、left很好算,就是元素到左上角原点的距离
  • bottom、right说白了就是在 top/left的基础上 加上 上面说的 height/width
  • 另外一点需要注意的是:当页面有滚动条时,随着滚动条左右上下滚动,top、bottom、left、right都会跟着变;比如原来的top值是0,页面向上滚动了100px,那么top值就成了 -100

代码实测

box-sizing:content-box时

请添加图片描述

box-sizing:border-box时

请添加图片描述

有滚动条时

请添加图片描述

注意:

在看源码时,经常看到兼容性IE低版本的写法,了解即可,比如看popper.js源码时:

    /**
     * Get bounding client rect of given element
     * @function
     * @ignore
     * @param {HTMLElement} element
     * @return {Object} client rect
     */
    function getBoundingClientRect(element) {
        var rect = element.getBoundingClientRect();

        // whether the IE version is lower than 11
        var isIE = navigator.userAgent.indexOf("MSIE") != -1;

        // fix ie document bounding top always 0 bug
        var rectTop = isIE && element.tagName === 'HTML'
            ? -element.scrollTop
            : rect.top;

        return {
            left: rect.left,
            top: rectTop,
            right: rect.right,
            bottom: rect.bottom,
            width: rect.right - rect.left,
            height: rect.bottom - rectTop
        };
    }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/67161.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

国家级专新特精“小巨人”「皖仪科技」携手企企通,打造采购数字化平台成功上线

近日,安徽皖仪科技股份有限公司(以下简称“皖仪科技”)携手企企通共同打造的数字化采购管理系统成功上线。基于皖仪科技的采购业务流程和规则,形成全新的数字化采购体系,在推动企业降本增效的同时,实现企业…

单商户商城系统功能拆解42—应用中心—商城公告

单商户商城系统,也称为B2C自营电商模式单店商城系统。可以快速帮助个人、机构和企业搭建自己的私域交易线上商城。 单商户商城系统完美契合私域流量变现闭环交易使用。通常拥有丰富的营销玩法,例如拼团,秒杀,砍价,包邮…

冠状病毒疾病优化算法 (COVIDOA)附matlab代码

​✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进,matlab项目合作可私信。 🍎个人主页:Matlab科研工作室 🍊个人信条:格物致知。 更多Matlab仿真内容点击👇 智能优化算法…

npp各个平台npp数据比较

文章目录1GEE中的npp数据2 与其他数据的比较1GEE中的npp数据 在GEE上查阅npp,可以看到有连个数据集,一个是Terra的,另一个是Aqua的。 我比较了两个的不同,发现Terra是2000-目前的,而Aqua是2002-目前的,都是…

2022吴恩达机器学习课程——第一课

注:参考B站视频教程 视频链接:【(强推|双字)2022吴恩达机器学习Deeplearning.ai课程】 文章目录第一周一、监督学习与无监督学习二、线性回归三、梯度下降第二周一、向量化二、特征缩放第三周一、逻辑回归二、训练逻辑回归模型三、逻辑回归中的梯度下降四…

[运维]如何快速压缩一个数据库的硬盘占用大小(简单粗暴但有效)

文章目录前言一、数据库文件为什么会那么大?1.数据空间2.日志空间3.索引空间4.其他二、我的解决方案总结前言 在维护网站时我们经常会遇到数据库占用服务器磁盘空间的问题。高端的食材往往只需要采用最朴素的烹饪方式。本文我讲一个简单粗暴但有效的方法。本文以Sq…

RabbitMQ快速上手以及RabbitMQ交换机的四种模式

Win10安装&#xff1a; ​win10下安装 RabbitMQ​_柚几哥哥的博客-CSDN博客 Linux安装&#xff1a; Linux下载安装 RabbitMQ​_柚几哥哥的博客-CSDN博客 一、基础使用 1、导入依赖 <!--RabbitMQ--><dependency><groupId>org.springframework.boot</g…

JAVA12_06学习总结(JDBC,工具类优化)

今日内容 1. PreparedStatement PreparedStatement--预编译步骤1)注册驱动2)获取数据库连接对象3)准备sql语句--不需要拼接--需要的参数全部使用 ? 占位符4)通过数据库连接对象,获取预编译对象,同时将sql语句房费数据库,将参数和参数类型都存储在预编译中Connection中的方法…

均匀传输线的串扰和饱和长度

下图为串扰的电路模型&#xff0c;动态线与静态线之间通过互容与互感联系&#xff0c;这样也说明了动态线的信号耦合到静态线上的条件是存在di/dt或者dv/dt时&#xff0c;也就是说只在信号边沿上产生串扰&#xff0c;当电压或者电流为常数的时候静态线上就不会有串扰的信号。 信…

扩散模型:Diffusion models as plug-and-play priors作为即插即用先验的扩散模型

扩散模型&#xff1a;Diffusion models as plug-and-play priors作为即插即用先验的扩散模型0.摘要1.概述2.方法2.1.问题设置2.2.将去噪扩散概率模型作为先验3.实验&#xff1a;图像生成3.1.MNIST的简单说明3.2.使用现成组件条件生成脸部图像4.实验&#xff1a;语义分割附录B&a…

Ubuntu 20.04 系统最快安装WRF软件手册

前言 天气研究和预报&#xff08;WRF&#xff09;模型是一种中尺度数值天气预报系统&#xff0c;在全球范围内用于业务预报和研究目的。 这是在基于Intel的i7&#xff08;12核&#xff09;Linux Ubuntu 20.04 LTS系统上安装WRF 4.2.1的版本。这将有助于初学者在普通台式机上实现…

树莓派4b+mcp2515实现CAN总线通讯和系统编程(一.配置树莓派CAN总线接口)

文章目录前言硬件连线树莓派环境准备启用树莓派ssh启用mcp2515驱动下载can-utils工具测试CAN通讯开启CAN网卡测试发送和接收前言 树莓派本身是没有CAN通讯能力的&#xff0c;但他有mcp2515模块的驱动&#xff0c;可以通过SPI来控制mcp2515进行CAN的通讯。 本章主要讲,如何使能…

基于卡尔曼滤波的二维目标跟踪(Matlab代码实现)

&#x1f352;&#x1f352;&#x1f352;欢迎关注&#x1f308;&#x1f308;&#x1f308; &#x1f4dd;个人主页&#xff1a;我爱Matlab &#x1f44d;点赞➕评论➕收藏 养成习惯&#xff08;一键三连&#xff09;&#x1f33b;&#x1f33b;&#x1f33b; &#x1f34c;希…

双十二选哪个品牌led灯好一点?国产led灯这些品牌护眼好

现在绝大部分人造灯光都是使用led灯珠作为发光源了&#xff0c;所以led灯普遍的质量都比较好&#xff0c;也能护眼&#xff0c;特别是习惯晚上熬夜工作、学习、看书的人群&#xff0c;也都会选择led台灯来辅助照明&#xff0c;因为相比传统的家用室内顶灯&#xff0c;led护眼灯…

【小游戏】Unity游戏愤怒的足球(小鸟)

目录 1.弹弓逻辑 2.鸟的逻辑 3.GameManager主逻辑 文末有源工程地址 难度系数: ★★★★☆ 游戏玩法: 愤怒的足球,其实就是经典的愤怒的小鸟换图 项目简介: 功能完善,主要代码逻辑完整 本文内容: 记录一下这个工程,对内部代码逻辑没有深入了解有待以后发掘 1.弹弓逻…

workerman 聊天demo

1.demo下载 链接: https://pan.baidu.com/s/1MOqcDwvrZGgaYpZUBxxZiA 提取码: 2yqf 2.安装workerman 我这里使用的是tp5框架 下载官方压缩包解压到根目录 3.workerman 数据发送相关类 将worker目录放到项目extend文件夹中 4.启用workerman 登录服务器 linux启动方式&…

安卓APP源码和设计报告——购物APP的设计与实现

2021—2022学年第二学期期末考试 《Android手机软件开发》实践考核 项目设计说明书 项目名称&#xff1a; 购物APP的设计与实现 专 业&#xff1a; 计算机科学与技术 学 号&#xff1a; 姓 名&#xff1a; 任课教师&#xff1a; 2022年6月12日 目 录 1.项目概述11 2…

阿里云搭建博客之如何设置网页为中文

今天&#xff0c;在阿里云上参照“我的教程”–“搭建云上博客”中的指导&#xff0c;基于ApachemysqlWordPress搭建个人博客&#xff0c;参照上面的教程完成博客的搭建。但证登录博客后&#xff0c;发现业务展示为英文。在setting—>site language 设置中只有英文&#xff…

(附源码)springboot实验室预约管理系统 毕业设计 261141

实验室预约管理系统的设计与实现 摘 要 远程预约是一种全新的网络租用方式&#xff0c;它通过互联网突破了时间和空间限制&#xff0c;实现了便捷快速的预约与管理功能。在对数据信息有效组织并整合了一定使用功能后&#xff0c;远程预约系统可以方便地实现预约与取消&#xff…

如何在centos上安装nvidia驱动

首先查询服务器的gpu型号 [kfkbigdata-pro01 ~]$ lshw -C display WARNING: you should run this program as super-user. *-display description: VGA compatible controller product: SVGA II Adapter vendor: VMware physical id: f bus info: pci0000:00:0f.0 version: 00…