JS中getBoundingClientRect()方法理解

最新推荐文章于 2024-04-01 09:48:58 发布
最新推荐文章于 2024-04-01 09:48:58 发布
阅读量294 收藏 1
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46978034/article/details/117523982
版权

getBoundingClientRect方法获取元素位置

getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。
该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；

这里的top、left和css中的理解很相似，width、height是元素自身的宽高，但是right，bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content=
最低0.47元/天 解锁文章
浩哥学习编程之路
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js中getBoundingClientRect()方法详解
qq_26642611的博客
03-13 1430
一.getBoundingClientRect()分析 getBoundingClientRect()获取元素位置，这个方法没有参数 getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。 getBoundingClientRect()是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。 该函数返回一个Object对象，该对象有6个...
JavaScript中getBoundingClientRect()方法详解
xuxiaoping1989的博客
09-27 1579
getBoundingClientRect() 这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。 var box=document.getElementById('box');         // 获取元素 alert(box.getBoundingClientRect().top);         // 元素
vue3动态获取数据时使用getboundingclientrect()无效
最新发布
m0_61280181的博客
04-01 508
在vue3中，当数据重数据库查出渲染到页面上时想要获取相关html标签位置信息时报错：TypeError: Cannot read properties of null (reading 'getBoundingClientRect'使用document.getElementById("DivShow")调用getBoundingClientRect()
GetClientRect和GetWindowRect
Sayesan的专栏
02-12 3967
今天项目中需要对屏幕坐标系和客户区坐标系进行转换，在使用以下两对函数时感到很困惑。在参考了http://www.cppblog.com/aurain/archive/2009/03/10/76126.html这篇文章之后，有点明白，但是这篇帖子后边的附图让我感到很困惑（让我认为这两对函数的处理不是可逆的），但是经过试验之后才发现这两对函数其实是一对互逆操作，测试如下： GetClientRect
javascript中的getBoundingClientRect()方法
沐雨橙风ιε的博客
09-04 301
javascript中的getBoundingClientRect()方法
js getBoundingClientRect使用方法详解
10-16
主要介绍了js getBoundingClientRect使用方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
js中getBoundingClientRect的作用及兼容方案详解
10-18
主要介绍了js中getBoundingClientRect的作用及兼容方案详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js中getBoundingClientRect( )方法案例详解.docx
01-21
js中getBoundingClientRect( )方法案例详解.docx
js中getBoundingClientRect( )方法
stay_少年的博客
05-24 525
js中getBoundingClientRect( )方法 一.getBoundingClientRect() 解析 getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
css样式里transform中的scale是否会影响getBoundingClientRect
gdutRex的博客
01-21 1406
结果 会影响，你当前试图的节点元素的展示的位置在哪，获取的值就是当前视图相对的节点的位置。 我们实现一个简单的页码来看看 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http
html检测指定位置元素,js中getBoundingClientRect获取某个html元素相对于视窗的位置...
weixin_33048525的博客
06-04 249
用习惯了jQuery的人，一般会用offset().top来获取元素相对于窗口的位置，其实我们还有一个原生的更好用的方法：getBoundingClientRect1.getBoundingClientRect的作用getBoundingClientRect用于获取某个html元素相对于视窗的位置集合。执行 object.getBoundingClientRect();会得到元素的top、righ...
getBoundingClientRect方法获取盒子的相关长度属性
wanghe1111_的博客
03-22 533
js的getBoundingClientRect方法获取盒子的相关长度属性
getBoundingClientRect() 获取元素的大小及其相对于视口的位置
lwx931449660的博客
09-14 892
getBoundingClientRect方法返回元素的大小及其相对于视口的位置，该方法没有参数。 返回值是一个对象（DOMRect对象） // 获取视窗的宽度 var doc= win.document.documentElement console.log(doc.getBoundingClientRect()) // 获取位置集合 上述输出内容，即getBoundingClientRect方法返回元素的大小及其相对于视口的位置集合： DOMRect {x: 0, y: 0, width:.
构造函数new实例化对象过程及内存展现
m0_46978034的博客
05-09 734
这篇文章主要是讲通过构造函数new实例对象在内存执行的过程展开分析 话不多说 我将根据下面代码来分析new实例对象在内存执行的过程 function People(name, age, gender) { this.name = name; this.age = age; this.gender = gender; this.hobby = function(sing) { co
JS流程控制
m0_46978034的博客
11-14 494
文章目录一.流程控制二.顺序流程控制三.分支流程控制if语句 一.流程控制 在代码执行的过程中，各个代码执行的顺序对结果是有直接影响的，很多时候我们要通过控制代码执行的顺序来完成我们的功能（简单理解就是流程控制来控制我们代码按照什么方式来执行） 流程控制一共有三种结构，分别是顺序结构，分支结构，循环结构。这三种结构代表三种代码执行的顺序 二.顺序流程控制 顺序流程控制是最简单的 就是从上往下依次执行。 三.分支流程控制if语句 ...
js执行上下文理解
m0_46978034的博客
06-14 454
1.什么是执行上下文 执行上下文就是当前JavaScript代码在被解析和执行时存在的环境(地方)，只要有javascript代码运行，那么它就一定是运行在执行上下文中 2.执行上下文的分类 (1)全局执行上下文，这是默认的，最基础执行上下文 不在函数内部的代码都位于全局执行上下文中 全局执行上下文，只有一个，浏览器中的全局对象就是window对象，this指向这个全局对象 (2)函数执行上下文 函数执行上下文：存在无数个，只有在函数被调用的时候才会被创建，每次调用函数都会创建一个新的执行上下文
程序执行过程原理图分析
m0_46978034的博客
05-09 438
我将根据下面的代码画出程序执行过程原理图来进行分析 先看代码 <script> var a = 10; //函数也是全局变量 function f1() { var b = 11 } f1() </script>
js getBoundingClientRect()方法是什么
07-29
js getBoundingClientRect()方法是用于获取页面中某个元素相对于浏览器视窗的位置和大小的方法。该方法返回一个包含元素位置和大小信息的对象，包括left、top、right、bottom、x、y、width和height等属性。其中，left表示元素左边距离页面左边的距离，top表示元素上边距离页面上边的距离，right表示元素右边距离页面左边的距离，bottom表示元素下边距离页面上边的距离，x表示元素左边距离页面左边的距离，y表示元素上边距离页面上边的距离，width表示元素自身的宽度，height表示元素自身的高度。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* [js中getBoundingClientRect()方法详解](https://blog.csdn.net/m0_59075169/article/details/124697071)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [js - js中关于getBoundingClientRect()方法的使用](https://blog.csdn.net/qq_43886365/article/details/128032079)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [JS中getBoundingClientRect()方法理解](https://blog.csdn.net/m0_46978034/article/details/117523982)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值