DOM 原生方法getBoundingClientRect()获取元素相对视口位置

  1. DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的
  2. 当计算边界矩形时,会考虑视口区域(或其他可滚动元素)内的滚动操作,也就是说,当滚动位置发生了改变,top和left属性值就会随之立即发生变化(因此,它们的值是相对于视口的,而不是绝对的)。如果你需要获得相对于整个网页左上角定位的属性值,那么只要给top、left属性值加上当前的滚动位置(通过window.scrollX和window.scrollY),这样就可以获取与当前的滚动位置无关的值。
<div id="box"></div>

<style>
body{
margin: 0;
padding: 0
}
#box {
position: absolute;
width: 100px;
height: 100px;
background-color: #ccc;
margin: 0;
padding: 0;
border: 2px solid #000;
top:20px;
left: 20px }
</style> <script> var oBox = document.getElementById("box");
console.log(oBox.getBoundingClientRect());
// 打印结果
// bottom: 124 顶部距离盒子底部的距离(包括bordder)
// height: 104 盒子高度()
// left: 20 盒子左边距离视口左边的距离
// right: 124 盒子右边距离视口左侧的距离
// top: 20 盒子顶部距离视口顶部的距离
// width: 104 盒子的宽度 </script>

 

获取元素在页面中位置 getBoundingClientRect()的更多相关文章

  1. getBoundingClientRect方法获取元素在页面中的相对位置

    获取元素位置可以用 offset 或 getBoundingClientRect,使用 offset 因为兼容性不好,比较麻烦,offset获取位置会形成"回溯".而 getBou ...

  2. 关于js获取元素在屏幕中的位置的方法

    针对我们获取元素在页面中的位置的问题,我们还是用老师一峰老师的方法来解决吧 下面上HTML代码 <div class="left_footer"> <p data ...

  3. 获取元素在浏览器中的绝对位置(从jquery1.8中抠出来)

    <style> html,body{margin:0;padding:0;} .d1{margin-left:40px;background:red;width:2000px;height ...

  4. 我的前端工具集(八)获得html元素在页面中的位置

    我的前端工具集(八)获得html元素在页面中的位置   liuyuhang原创,未经允许禁止转载 目录 我的前端工具集 有时候需要用点击等操作,来获取某元素在页面中的位置,然后在该位置添加某些操作 如 ...

  5. javascript 获取iframe里页面中元素值的方法 关于contentWindow和contentDocumen

    javascript 获取iframe里页面中元素值的方法 IE方法:document.frames['myFrame'].document.getElementById('test').value; ...

  6. jquery获取元素到页面顶部距离

    jquery获取元素到页面顶部距离的语句为: $(selector).offset().top

  7. getBoundingClientRect获取元素在页面上的位置

    getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置. getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起 ...

  8. jquery 获取元素在浏览器中的绝对位置

    代码详解 1,获取对象(自定义调整打开新窗口参照元素) var obj = $("#oButton"); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗口就会根椐按钮的位置进行调 ...

  9. js 获取元素在页面上的偏移量的最佳方式

    使用js制作效果时,我们常常要获取某个元素在页面上的偏移量(例如tip提示框功能).而获取偏移量可以直接获取相对于document的偏移量,也可以获取相对与视口的偏移量(viewpoint)加上页面滚 ...

随机推荐

  1. 6、负载均衡HAproxy介绍

    6.1.常用负载均衡器软件说明: 现在常用的三大开源软件负载均衡器分别是Nginx.HAProxy.LVS. 1.nginx负载均衡的特点: (1)工作在网络的七层之上,可以针对http应用做一些分流 ...

  2. InterlliJ Debug启动提示:Method breakpoints may dramatically slow down debugging

  3. AcWing 105. 七夕祭

    七夕节因牛郎织女的传说而被扣上了「情人节」的帽子. 于是TYVJ今年举办了一次线下七夕祭. Vani同学今年成功邀请到了cl同学陪他来共度七夕,于是他们决定去TYVJ七夕祭游玩. TYVJ七夕祭和11 ...

  4. centos 安装es

    第一步:必须要有jre支持 elasticsearch是用Java实现的,跑elasticsearch必须要有jre支持,所以必须先安装jre 第二步:下载elasticsearch 进入官方下载 h ...

  5. Robotframework学习笔记之—Rrobotframework运行报错“command: pybot.bat --argumentfile”

    Rrobotframework运行报错"command: pybot.bat --argumentfile" 解决方案: 1.可能是缺失文件: 1.1.检查python安装目录下的 ...

  6. Sharding+SpringBoot+Mybatis 读写分离

    基于Sharding JDBC的读写分离 1.引入pom.xml <dependencies> <!-- mybatis --> <dependency> < ...

  7. Java基础00-运算符4

    1. 算术运算符 1.1 运算符和表达式 1.2 算数运算符 余数的计算取余数是指整数除法中被除数未被除尽部分,且余数的取值范围为0到除数之间(不包括除数)的整数 ,例如27除以6,商数为4,余数为3 ...

  8. keeplived+mycat+mysql高可用读写分离水平分表(谁看谁都会)

    一:环境准备: 应用 主机 mysql-master 192.168.205.184 mysql-slave 192.168.205.185 mycat-01,keeplived,jdk 192.16 ...

  9. 基于SSM框架的旅游网站

    介绍:spring+springmvc+mybatis三大框架,mysql数据库 功能结构图: 效果截图: 数据库表: CREATE TABLE `t_admin` ( `id` int(11) NO ...

  10. .Net Core with 微服务 - Polly 服务降级熔断

    在我们实施微服务之后,服务间的调用变的异常频繁.多个服务之间可能是互相依赖的关系.某个服务出现故障或者是服务间的网络出现故障都会造成服务调用的失败,进而影响到某个业务服务处理失败.某一个服务调用失败轻 ...