前端js实现获取指定元素(top,lef,right,bottom)到视窗的距离 ;getBoundingClientRect()获取

news2024/10/7 8:20:32

getBoundingClientRect()获取元素位置,这个方法没有参数

该函数返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height; 

	<div id="box"></div>

    var object=document.getElementById('box');  
    rectObject = object.getBoundingClientRect();
 
	rectObject.top:元素上边到视窗上边的距离;
	rectObject.right:元素右边到视窗左边的距离;
	rectObject.bottom:元素下边到视窗上边的距离;
	rectObject.left:元素左边到视窗左边的距离;
	rectObject.width:是元素自身的宽
	rectObject.height是元素自身的高

 

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

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

相关文章

产教融合 | 中南大学暑期实训,用万应低代码践行敏捷开发之路

融合学究与实践&#xff0c;方能成为当代“数字英才”。 2023年8月11日&#xff0c;由潇湘大数据研究院、中南大学计算机学院及云畅科技联合组织的2020级数据科学与大数据技术专业暑期‘生产实训’项目圆满结束。本次实训全程线下进行&#xff0c;基于“深度创新培育计划”&…

宇凡微Y51T合封射频芯片,集成433M芯片和MCU

宇凡微推出的Y51T芯片的设计理念很有趣&#xff0c;将MCU和射频芯片集成在一颗芯片内&#xff0c;从而实现高度的集成度和功能优势。这样的设计在某些应用中确实能够带来诸多优点&#xff1a; Y51T将51H MCU和Y4455 433MHz射频芯片融合在一颗芯片内&#xff0c;实现了高度集成的…

GPU中统一内存最新机制解析

通过异构内存管理简化 GPU 应用程序开发 异构内存管理 (HMM) 是一项 CUDA 内存管理功能&#xff0c;它扩展了 CUDA 统一内存编程模型的简单性和生产力&#xff0c;以包括具有 PCIe 连接的 NVIDIA GPU 的系统上的系统分配内存。 系统分配内存是指最终由操作系统分配的内存&#…

face-api实现人脸识别。

face-api实现人脸识别 face-api的由来tensorflow.js 是什么部分代码模型介绍 face-api的由来 访问地址 JavaScript API for face detection and face recognition in the browser implemented on top of the tensorflow.js core API 官方说明 翻译&#xff1a;在tensorflow.js…

oppo手机怎么录屏?录制屏幕,就看这里!

“有人知道oppo手机怎么录屏吗&#xff0c;前几年买的oppo手机&#xff0c;用到现在感觉挺流畅的&#xff0c;也不是很卡顿&#xff0c;最近听说我这个型号的手机也有录屏功能&#xff0c;但是我不知道怎么打开&#xff0c;就想问问大伙&#xff0c;oppo手机怎么录屏呀。” 在…

MySql015——使用子查询

一、创建customers表 ######################## # Create customers table ######################## use study;CREATE TABLE customers (cust_id int NOT NULL AUTO_INCREMENT,cust_name char(50) NOT NULL ,cust_address char(50) NULL ,cust_city char…

LED地板屏幕的工作原理

LED地砖屏是一款数字化地面展示设备&#xff0c;它的实现主要是以数字技术为核心&#xff0c;通过微电脑全数字化处理以及先进的电路保护设备&#xff0c;对视频进行同步控制&#xff0c;并实现了高分辨率的显示效果&#xff0c;在展厅设计以及舞台演出中都有相关的应用。免费提…

【MySQL】组合查询

目录 一、组合查询 1.创建组合查询 2.union规则 3.包含或取消重复的行 4.对组合查询结果排序 一、组合查询 多数SQL查询都只包含从一个或多个表中返回数据的单条SELECT语句。MySQL也允许执行多个查询&#xff08;多条SELECT语句&#xff09;&#xff0c;并将结果作为单个查…

kafka和消息队列

https://downloads.apache.org/kafka/3.5.1/kafka_2.13-3.5.1.tgz d kafka依赖与zookeeper kakka配置文件 broker.id1 #每个 broker 在集群中的唯一标识&#xff0c;正整数。每个节点不一样 listenersPLAINTEXT://192.168.74.70:9092 ##监听地址 num.network.threads3 #…

Monibucav4(开源流媒体服务器)在Windows上搭建rtmp服务器并实现拉取rtsp视频流以及转换flv播放

场景 开源流媒体服务器ZLMediaKit在Windows上运行、配置、按需拉流拉取摄像头rtsp视频流)并使用http-flv网页播放&#xff1a; 开源流媒体服务器ZLMediaKit在Windows上运行、配置、按需拉流拉取摄像头rtsp视频流)并使用http-flv网页播放_srs按需拉流_霸道流氓气质的博客-CSDN…

K-Means(K-均值)聚类算法

目录 K-Means 算法 K-Means 术语 K 值如何确定 K-Means 场景 美国总统大选摇争取摆选民 电商平台用户分层 给亚洲球队做聚类 ​编辑 其他场景 K-Means 工作流程 K-Means 开发流程 K-Means 的评价标准 K-Means 算法 对于 n 个样本点来说&#xff0c;根据距离公式&a…

如何使用HOOPS技术将3D模型转换成点云?

将3D模型转换为点云是一个常见的计算机图形学任务&#xff0c;通常用于将具有几何信息的复杂模型转换为一组离散的点坐标。这可以用于各种应用&#xff0c;如点云分析、计算机辅助设计、虚拟现实等。以下是一些步骤&#xff0c;可供您在将3D模型转换为点云时参考&#xff1a; …

还不会选渲染器?建筑设计师年度爱用排名来了!

近期&#xff0c;建筑设计网站CG architect公布了其主导的一年一度全球建筑渲染引擎调查报告&#xff1a;《2022年建筑可视化渲染引擎调查结果》&#xff0c;该报告主要是针对建筑可视化市场中50多种渲染引擎的使用比例情况。 在3月1号到7月31号期间&#xff0c;CG architect基…

vscode调试PHP代码

目录 准备工作ssh的连接以及配置调试 准备工作 1.首先你需要下载一个vscode 2.下载模块 你需要在VScode中去下载我们所需的两个模块PHP Debug以及remote -ssh 3.安装对应版本的xdebug 需要在xdebug的官方去进行分析&#xff0c;选择适合你自己版本的xdebug 去往官方&#x…

Thrift构建调用说明

安装开发环境 sudo yum -y groupinstall "Development Tools" 安装bison sudo yum install -y wget 安装autoconf wget http://ftp.gnu.org/gnu/autoconf/autoconf-2.69.tar.gz tar xvf autoconf-2.69.tar.gz cd autoconf-2.69 ./configure --prefix/usr make…

Android性能优化之APK瘦身详解(瘦身73%)

公司项目在不断的改版迭代中&#xff0c;代码在不断的累加&#xff0c;终于apk包不负重负了&#xff0c;已经到了八十多M了。可能要换种方式表达&#xff0c;到目前为止没有正真的往外推过&#xff0c;一直在内部执行7天讨论需求&#xff0c;5天代码实现的阶段。你在写上个版本…

【分布式技术专题】「OSS中间件系列」Minio的文件服务的存储模型及整合Java客户端访问的实战指南

Minio的元数据 数据存储 MinIO对象存储系统没有元数据数据库&#xff0c;所有的操作都是对象级别的粒度的&#xff0c;这种做法的优势是: 个别对象的失效&#xff0c;不会溢出为更大级别的系统失效。便于实现"强一致性"这个特性。此特性对于机器学习与大数据处理非…

初阶数据结构(六)队列的介绍与实现

&#x1f493;博主csdn个人主页&#xff1a;小小unicorn&#x1f493; ⏩专栏分类&#xff1a;C &#x1f69a;代码仓库&#xff1a;小小unicorn的学习足迹&#x1f69a; &#x1f339;&#x1f339;&#x1f339;关注我带你学习编程知识 栈 队列的介绍队列的概念&#xff1a;队…

webassembly003 ggml ADAM (暂记)

Adam优化器的工作方式是通过不断更新一阶矩估计和二阶矩估计来自适应地调整学习率&#xff0c;并利用动量法来加速训练过程。这种方式可以在不同的参数更新方向和尺度上进行自适应调整&#xff0c;从而更有效地优化模型。 https://arxiv.org/pdf/1412.6980.pdf 参数 这些参数…

SCI论文创新思路

SCI论文创新思路 一、 创新的分类1、算法创新2、架构创新3、迁移创新4、思想创新5、方法创新6、组合创新 二、组合创新的必要性三、组合创新的流程四、组合创新举例1、组合创新公式2、生活中的例子3、关于CV的例子4、魔改的方法 一、 创新的分类 1、算法创新 比如提出CNN、LS…