javascript获取元素在浏览器中工作区域的左、右、上、下距离,或带滚动条的元素在页面中的大小
//获取元素在包含元素框中的大小
//第1个函数为获取元素在包含元素中左内边框的距离
function getELementLeft(element){//获取元素在包含元素左边距离var actualeft=element.offsetLeft;//获取元素的上级包含元素var current=element.offsetParent;//循环到一直没有包含元素while(current !==null){actualeft+=current.offsetLeft;current=current.offsetParent;}return actualeft;}
//第2个函数为获取元素在包含元素中顶部内边框的距离function getElementTop(element){var actuatop=element.offsetTop;var current=element.offsetParent;while(current !==null){actuatop += current.offsetTop;current=current.offsetParent;}return actuatop;}//获取元素在浏览器工作区域中的位置,相对于浏览器工作区域的左、右、上、下的值
function getBoundingClientRect(element){//获取带有垂直滚动条的页面区,包括在上面的隐藏内容的像素数,document.body.scrollTop为兼容IEvar scrollTop=document.documentElement.scrollTop || document.body.scrollTop;//获取带有水平滚动条的页面区,包括在左边的隐藏内容的像素数,document.body.scrollLeft为兼容IEvar scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;//检查元素的getBoundingClientRect方法,这个方法是元素自有的,不是我们上面的那个函数名if(element.getBoundingClientRect){//设置arguments.callee的offset属性,才设置肯定为NaN,不等于numberif(typeof arguments.callee.offset !="number"){//创建一个零时的div元素,设置他的left top 为0var temp=document.createElement("div");temp.style.cssText="position:absolute;left:0;top:0;";document.body.appendChild(temp);//让offset获取到值,如果是IE8浏览器以前的为-2arguments.callee.offset=-temp.getBoundingClientRect().top-scrollTop;document.body.removeChild(temp);temp=null;}var rect=element.getBoundingClientRect();//获取offset值var offset=arguments.callee.offset;//返回元素对于浏览器工作区左中上下距离return {left:rect.left + offset,right:rect.right+offset,top:rect.top+offset,bottom:rect.bottom+offset};//如果元素没有element.getBoundingClientRect,则以我们上面两个函数来计算带滚动条的工作区坐标位置}else{var actualLeft=getElementLeft(element);var actualTop=getElementTop(element);}return {left:actualLeft-scrollLeft,right:actualLeft+element.offsetWidth - scrollLeft,top:actulTop-scrollTop,bottom:actualTop+element.offsetHeight - scrollTop} }
var div=document.getElementById("container");
var bd=document.getElementsByClassName("bd")[0];
var size=getBoundingClientRect(bd);
console.log(size.left);
//html代码部分
<div id="container"><div class="bd"></div></div>
//css
<style type="text/css">#container{width: 800px;height: 500px;border: 1px solid #ccc;margin: 0 atuo;margin-top: 50px;}div#container .bd{width:400px;height: 400px;border: solid 1px blue;position: relative;top: 50px;left:100px;}</style>
相关文章:
javascript获取元素在浏览器中工作区域的左、右、上、下距离,或带滚动条的元素在页面中的大小
//获取元素在包含元素框中的大小 //第1个函数为获取元素在包含元素中左内边框的距离 function getELementLeft(element){//获取元素在包含元素左边距离var actualeftelement.offsetLeft;//获取元素的上级包含元素var currentelement.offsetParent;//循环到一直没有包含元素whil…...
VSCode 安装使用教程 环境安装配置 保姆级教程
一个好用的 IDE 不仅能提升我们的开发效率,还能让我们保持愉悦的心情,这样才是非常 Nice 的状态 ^_^ 那么,什么是 IDE 呢 ? what IDE(Integrated Development Environment,集成开发环境)是含代码…...
c盘中temp可以删除吗?appdata\local\temp可以删除吗?
http://www.win10d.com/jiaocheng/22594.html C盘AppData文件夹是一个系统文件夹,里面存储着临时文件,各种应用的自定义设置,快速启动文件等。近期有用户发现appdata\local\temp占用了大量的空间,那么该文件可以删除吗?…...
Java手写聚类算法
Java手写聚类算法 1. 算法思维导图 以下是聚类算法的实现原理的思维导图,使用Mermanid代码表示: #mermaid-svg-AK9EgYRS38PkRJI4 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-AK9EgYRS38…...
解密Java多线程中的锁机制:CAS与Synchronized的工作原理及优化策略
目录 CAS什么是CASCAS的应用ABA问题异常举例 Synchronized 原理基本特征加锁过程偏向锁轻量级锁重量级锁 其他优化操作锁消除锁粗化 CAS 什么是CAS CAS: 全称Compare and swap,字面意思:”比较并交换“,CAS涉及如下操作: 假设内存中的原数据…...
solid works草图绘制与设置零件特征的使用说明
(1)草图绘制 • 草图块 在 FeatureManager 设计树中,您可以隐藏和显示草图的单个块。您还可以查看块是欠定义 (-)、过定义 () 还是完全定义。 要隐藏和显示草图的单个块,请在 FeatureManager 设计树中右键单击草图块,…...
vue3使用router.push()页面跳转后,该页面不刷新问题
文章目录 原因分析最优解决 原因分析 这是一个常见问题,当使用push的时候,会向history栈添加一个新记录,这个时候,再添加一个完全相同的路由时,就不会再次刷新了 最优解决 在页面跳转时加上params参数时间 router.…...
如何理解数字工厂管理系统的本质
随着科技的飞速发展和数字化转型的推动,数字工厂管理系统逐渐成为工业4.0时代的重要工具。数字工厂系统旨在整合和优化工厂运营的各个环节,通过实时数据分析和处理,提升生产效率,降低成本,并增强企业的整体竞争力。为了…...
笔记1.3 数据交换
如何实现数据通过网络核心从源主机到达目的主机? 数据交换 交换网络: 动态转接动态分配传输资源 数据交换类型: (1)电路交换 (2)报文交换 (3)分组交换 电路交换的特…...
实时车辆行人多目标检测与跟踪系统(含UI界面,Python代码)
算法架构: 目标检测:yolov5 目标跟踪:OCSort其中, Yolov5 带有详细的训练步骤,可以根据训练文档,训练自己的数据集,及其方便。 另外后续 目标检测会添加 yolov7 、yolox,目标跟踪会…...
谷歌AI机器人Bard发布强大更新,支持插件功能并增强事实核查;全面整理高质量的人工智能、机器学习、大数据等技术资料
🦉 AI新闻 🚀 谷歌AI机器人Bard发布强大更新,支持插件功能并增强事实核查 摘要:谷歌的人工智能聊天机器人Bard发布了一项重大更新,增加了对谷歌应用的插件支持,包括 Gmail、Docs、Drive 等,并…...
NI SCXI-1125 数字量控制模块
NI SCXI-1125 是 NI(National Instruments)生产的数字量控制模块,通常用于工业自动化和控制系统中,以进行数字输入和输出控制。以下是该模块的一些主要产品特点: 数字量输入:SCXI-1125 模块通常具有多个数字…...
链表oj题1(Leetcode)——移除链表元素,反转链表,链表的中间节点,
链表OJ 一,移除链表元素1.1分析1.2代码 二,找到链表的中间节点2.1分析2.2代码 三,反转链表3.1分析3.2代码 四,找到链表中倒数第k个节点4.1分析4.2代码 一,移除链表元素 移除链表元素 1.1分析 这里的删除要分成两种…...
【libuv】与uvgrtrp的_SSIZE_T_定义不同
libuv的 #if !defined(_SSIZE_T_) && !defined(_SSIZE_T_DEFINED) typedef intptr_t ssize_t;...
安卓ROM定制 修改必备常识-----初步了解system系统分区文件夹的基本含义 【二】
安卓修改rom 固件 修改GSI 移植rom 必备常识 lib--**so文件基本解析 一起来了解system目录相应文件的用途吧。(rom版本不同里面的app也会不一样) 简单打开img格式后缀文件 给大家说下最简单的方法提取img里面的文件,对于后缀img格式的文件可…...
GPT会统治人类吗
一 前言 花了大概两天时间看完《这就是ChatGPT》,触动还是挺大的,让我静下来,认真地想一想,是否真正理解了ChatGPT,又能给我们以什么样的启发。 二 思考 在工作和生活中,使用ChatGPT或文心一言,…...
win系统环境搭建(六)——Windows安装nginx
windows环境搭建专栏🔗点击跳转 win系统环境搭建(六)——Windows安装nginx 本系列windows环境搭建开始讲解如何给win系统搭建环境,本人所用系统是腾讯云服务器的Windows Server 2022,你可以理解成就是你用的windows10…...
Java中使用BigDecimal类相除保留两位小数
问题 遇到2个数相除,需要保留2位小数的结果。 解决 BigDecimal sum ...; BigDecimal yearValue ...;MathContext mathContext new MathContext(2, RoundingMode.DOWN); yearValue.divide(sum, mathContext);...
激光雷达在ADAS测试中的应用与方案
在科技高速发展的今天,汽车智能化已是必然的趋势,且自动驾驶汽车的研究也在世界范围内进行得如火如荼。而在ADAS测试与开发中,激光雷达以其高性能和高精度占据着非常重要的地位,它是ADAS测试与开发中不可缺少的组成。 一 激光雷达…...
malloc与free
目录 前提须知: malloc: 大意: 头文件: 申请空间: 判断是否申请成功: 使用空间: 结果: 整体代码: malloc申请的空间怎么回收呢? 注意事项: free:…...
别再混淆了!深入对比Vivado中AXI DMA IP核与PS端DMA控制器的角色与分工
深入解析Vivado中AXI DMA与PS端DMA控制器的协同设计 在Zynq/MPSoC平台的软硬件协同开发中,数据搬运效率往往成为系统性能的瓶颈。许多开发者虽然能够熟练使用Vivado中的AXI DMA IP核完成基本数据传输,却对PL端AXI DMA与PS端DMA控制器之间的分工协作机制存…...
3步打造极速安全系统:AtlasOS开源优化方案全解析
3步打造极速安全系统:AtlasOS开源优化方案全解析 【免费下载链接】Atlas 🚀 An open and lightweight modification to Windows, designed to optimize performance, privacy and security. 项目地址: https://gitcode.com/GitHub_Trending/atlas1/Atl…...
Python从入门到精通(第08章):列表、元组、集合与字典
Python从入门到精通(第08章):列表、元组、集合与字典 开头导语 这是本系列第08章。本文采用"知识点讲解 + 错误示例 + 正确写法 + 自测清单"的结构,目标是让你不仅能看懂,还能独立写出可运行代码。建议你边看边敲,所有示例都亲自执行一次。 章节摘要 本章围…...
MBPFan技术解析:MacBook在Linux环境下的智能散热控制机制
MBPFan技术解析:MacBook在Linux环境下的智能散热控制机制 【免费下载链接】mbpfan 项目地址: https://gitcode.com/gh_mirrors/mb/mbpfan 在Linux系统上使用MacBook的用户经常面临散热管理的技术挑战,系统原生的温度控制策略往往无法充分发挥苹果…...
当心“Pin-to-Pin兼容“陷阱:ICM-42688国产替代芯片深度拆解与避坑指南
两句话总结:近期TDK ICM-42688-P价格暴涨至百元且一芯难求,立创商城上出现了华轩阳、Tokmas等"国产替代"。本文通过详细对比三家datasheet数据手册,揭示所谓"兼容"背后的软件陷阱与性能差异。结论可能出乎你意料…...
在构建高并发、海量数据的分布式系统时,数据存储与治理是核心挑战。单机数据库的性能瓶颈、ID 冲突、历史数据膨胀等问题,都需要通过架构层面的设计来解决
在构建高并发、海量数据的分布式系统时,数据存储与治理是核心挑战。单机数据库的性能瓶颈、ID 冲突、历史数据膨胀等问题,都需要通过架构层面的设计来解决。 以下结合具体业务场景,深度解析分布式 ID、分库分表、数据迁移与冷热分离的内部机制…...
# 发散创新:用Python打造自动化渗透测试工具链,从扫描到利用的全流程实战在网络安全攻防对抗中,**自动化渗透测试工
发散创新:用Python打造自动化渗透测试工具链,从扫描到利用的全流程实战 在网络安全攻防对抗中,自动化渗透测试工具正逐步成为红队成员和安全研究人员的核心利器。传统工具如Nmap、Burp Suite虽强大,但缺乏灵活定制能力;…...
如何通过Akagi提升麻将水平:从新手到高手的智能助手指南
如何通过Akagi提升麻将水平:从新手到高手的智能助手指南 【免费下载链接】Akagi A helper client for Majsoul 项目地址: https://gitcode.com/gh_mirrors/ak/Akagi 你是否在麻将对局中常常面临这样的困境:面对复杂牌局不知如何抉择?想…...
基于关键链方法的遗传算法求解项目调度问题
一、问题背景与核心思想 项目调度问题(Project Scheduling Problem, PSP)是在满足活动逻辑关系(紧前约束)和资源约束(如人力、设备)的前提下,确定各活动开始/结束时间,以最小化项目工…...
告别“人工智障”!OpenClaw + 大模型:打造真正能“看懂、想通、干成”的机械臂智能体
写在前面 在机器人圈子里,有个心照不宣的痛点:机械臂越来越便宜,但让它“听话”却越来越难。 传统的示教编程(Teaching Pendant)太慢,改个产品就得重教一遍;视觉定位(Vision Guided&…...
