前情

在前端开发需求中，经常需要获取元素的尺寸位置相关的属性，以往的做法是调用不同api获取相关属性的。

getBoundingClientRect介绍

getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。

标准盒子模型：元素的尺寸等于width/height + padding + border-width的总和。如果box-sizing: border-box，则元素的的尺寸等于 width/height。

top, left, right, bottom属性是使用对象的其他属性的值来计算获得的，Object.keys（）查找时将失败，Object.assign（）无法复制返回的属性

调用方式：

domRect = element.getBoundingClientRect();

domRect对象介绍

domRect 这个对象是由该元素的 getClientRects()方法返回的一组矩形的集合
left 元素左边距离浏览器可视窗左边的距离
right 元素右边距离浏览器视可视窗左边的距离
top 元素顶边距离浏览器视可视窗顶边的距离
bottom 元素底边距离浏览器视可视窗顶边的距离
width 元素自身的宽
height 元素自身的高
x 元素左边距离浏览器可视窗左边的距离
y 元素顶边距离浏览器可视窗顶边的距离

考虑到兼容性问题，尽量仅使用 left, top, right, 和 bottom属性是最安全的

使用示例

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

	<style>

		*{

		  padding: 0;

		  margin: 0;

		}

		.container{

		  width: 300px;

		  height: 300px;

		  overflow:auto;

		}

		.item{

		  width: 600px;

		  height: 60px;

		  text-align: left;

		  line-height: 60px;

		  margin: 60px 0 0 60px;

		  color: white;

		  background-color: blue;

		}

		.tips{

		  padding: 10px;

		}

		.rect_detail{

		  padding: 10px;

		  color: green;

		}

	</style>

</head>

<body>

	<div class="container">

    <div class="item">DOM0</div>

    <div class="item">DOM1</div>

    <div class="item">DOM2</div>

    <div class="item">DOM3</div>

  </div>

  <p class="tips">拖动滚动条查看值变化：</p>

  <div class="rect_detail">

    DOM2元素：

  </div>

	<script>

		var doms = document.querySelectorAll('.item');

		var container = document.querySelector('.container');

		var result = document.querySelector('.rect_detail');

		container.addEventListener('scroll', function() {

		  var donRect = doms[2].getBoundingClientRect();

		  result.innerHTML = "DOM2元素:<br />" +

		  "left:"+donRect.left + "<br />" +

		  "right:"+donRect.right + "<br />" +

		  "top:"+donRect.top + "<br />" +

		  "bottom:"+donRect.bottom + "<br />" +

		  "width:"+donRect.width + "<br />" +

		  "height:"+donRect.height + "<br />" +

		  "x:"+donRect.x + "<br />" +

		  "y:"+donRect.y;

		}, false);

	</script>

</body>

</html>

演示地址：https://jsbin.com/wozabey/1/edit?html,css,js,output

前端好用API之getBoundingClientRect的更多相关文章

  1. 前端调用百度API

    <!DOCTYPE html> <html> <head>         <meta charset="UTF-8">       ...

  2. 那些前端二进制操作API

    一直以来,前端的工作主要涉及的是字符串操作,而对二进制的数据接触较少.但是这种需求却一直存在着,尤其是HTML5之后,随着web应用越来越复杂,File,Blob,TypedArray这些API的出现 ...

  3. 阶段5 3.微服务项目【学成在线】_day07 课程管理实战_02-我的课程-前端页面与Api说明

    我的课程列表使用element 的card组件,如下: 前端页面代码 点击新增到了一个新增课程的页面 新增课程的界面 下面的card是循环遍历的代码 写死的card的静态数据 请求服务端的接口拿到数据 ...

  4. 前端好用API之Fullscreen

    前情 在前端开发需求中,特别网页有视频需求时,需要做视频全屏功能,或者在某些可视化大屏项目也要做全屏. Fullscreen介绍 让你可以简单地控制浏览器,使得一个元素与其子元素,如果存在的话,可以占 ...

  5. JavaScript前端最全API集锦

    一.节点1.1 节点属性Node.nodeName   //返回节点名称,只读Node.nodeType   //返回节点类型的常数值,只读Node.nodeValue  //返回Text或Comme ...

  6. 前后端分离开发之前端自己的API（DB）---- （1）

    Creating demo APIs for Front-End Developer 心理准备 Tool-1 开发工具/编辑器:Visual Studio Code , 即 VSCode官网: htt ...

  7. 总结一下公司项目使用各种较新的前端技术和 Api 的一些经验。

    关于 ES6: 需要注意 ES6 的一些特性和 API 是需要一个 200k 的 Polyfill 才能得到支持的,特性如 for ... of 循环,generator,API 如 Object.a ...

  8. ABP .Net Core API和Angular前端APP集成部署

    前言:在ABP官网(https://aspnetboilerplate.com)生成的.Net Core + Angular项目前后端是两个独立的项目,我们可以分开部署,也可以将前端和Web API一 ...

  9. 前端API层架构，也许你做得还不够

    上午好,今天为大家分享下个人对于前端API层架构的一点经验和看法.架构设计是一条永远走不完的路,没有最好,只有更好.这个道理适用于软件设计的各个场景,前端API层的设计也不例外,如果您觉得在调用接口时 ...

随机推荐

  1. How to check in Windows if you are using UEFI

    You might be wondering if Windows is using UEFI or the legacy BIOS, it's easy to check. Just fire up ...

  2. 学习JAVAWEB第三十七天（读构建之法有感）

    读<构建之法>有感 我今年暑假回去就要升入大二了,在今年的专业分流时,我选择了软件工程专业,起初的想法很简单,做一款优秀的,能拥有大量用户的软件,甚至还想通过自己的软件改变人们的生活.读了 ...

  3. Kubernetes之日志和监控（十五）

    一.日志和监控 1.1.Log 1.1.1.容器级别 通过docker命令查看容器级别的日志 docker ps --->containerid docker logs containerid ...

  4. springcloud 负载均衡之 ribbon。

    一.什么是 ribbon? 就是负载均衡! nginx也是负载均衡 1.1 !!!!ribbon和nginx的区别是什么? /* nginx: 正向代理(和客户端连在一起) 反向代理(和服务器端连在一 ...

  5. ApacheCN 计算机视觉译文集 20210203 更新

    新增了五个教程: OpenCV3 和 Qt5 计算机视觉 零.前言 一.OpenCV 和 Qt 简介 二.创建我们的第一个 Qt 和 OpenCV 项目 三.创建一个全面的 Qt + OpenCV 项 ...

  6. 「NOI十联测」深邃

    「NOI十联测」深邃 要使得最大的连通块最小,显然先二分答案. 先固定1结点为根. 对于一个果实,显然是先处理子树中未分配的点,再向外延伸. 每个结点记录一个\(si[]\),表示子树中未分配的点数, ...

  7. 「SDWC2018 Day1」网格

    题目当中有三条限制,我们来逐一考虑.对于第一条限制,每次走动的增加量 \(x_i \le M_x, y_i \le M_y\),可以发现一共走的步数是确定的,那么就相当于解这样两个方程组: \[x_1 ...

  8. bom-location

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 在Spring Boot中从类路径加载文件

    介绍 创建Spring Boot Web应用程序时,有时有时需要从类路径中加载文件:war和jar的加载文件格式是不一样的 在下面,您将找到在WAR和JAR中加载文件的解决方案. 资源加载器 使用Ja ...

  10. 关于在 Linux 下多个不相干的进程互斥访问同一片共享内存的问题

    转载请注明来源:https://www.cnblogs.com/hookjc/ 这里的"不相干",定义为: 这几个进程没有父子关系,也没有 Server/Client 关系 这一片 ...