前情

在前端开发需求中，经常需要获取元素的尺寸位置相关的属性，以往的做法是调用不同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. JVM之栈、堆、方法区（三）

    一.CPU和内存的交互 今天除夕,祝大家新年快乐,其实,我们知道的,我们的CPU跟内存会有非常频繁的交互,因为如果这个频繁的交互是交给我们的磁盘的话,那么随着我们的CPU运转速度越来越快,那么我们的磁 ...

  2. 微信小程序笔记整理--入门篇。

    7-2 微信小程序入门篇 准备篇 1.登录网址,https://mp.weixin.qq.com 注册一个微信小程序. 2.获取微信小程序appid,登录自己的小程序后台,在开发者设置中获得appid ...

  3. （4）什么是Ribbon负载均衡

    4.Ribbon负载均衡 上一节中,我们添加了@LoadBalanced注解,即可实现负载均衡功能,这是什么原理呢? 4.1.负载均衡原理 SpringCloud底层其实是利用了一个名为Ribbon的 ...

  4. 在windows、widfly环境下，远程debug

    最近:一直想弄一个远程debug模式,奈何没有接触过,导致畏首畏尾,不过,两天时间终于搞出来了雏形,真的是一个坑一个坑踩过来的. widfly环境:widfly8 准备工作:远程运行环境:省略,前面一 ...

  5. spring学习四：Spring中的后置处理器BeanPostProcessor

    BeanPostProcessor接口作用: 如果我们想在Spring容器中完成bean实例化.配置以及其他初始化方法前后要添加一些自己逻辑处理.我们需要定义一个或多个BeanPostProcesso ...

  6. 【linux运维】Linux服务器玩转vsftpd安装与配置

    Linux服务器搭建ftp详细教程. 前言 本文,主要以vsftp软件为主进行讲解,版本为3.0.2.以介绍设置虚拟用户.权限验证为主,linux权限知识默认大家都有所了解.vsftpd设置有两种模式 ...

  7. 枚举和注解@override、@Deprecated、@SuppressWarnings

    一.枚举 简介: 1)枚举对应英文(enumeration,简写 enum) 2)枚举是一组常量的集合. 3)可以这里理解:枚举属于一种特殊的类,里面只包含一组有限的特定的对象. 实现方式: 1.自定 ...

  8. PHP面试常考内容之面向对象（1）

    PHP中面向对象常考的知识点有以下几点,我将会从以下几点进行详细介绍说明,帮助你更好的应对PHP面试常考的面向对象相关的知识点和考题. 整个面向对象文章的结构涉及的内容模块有: 一.面向对象与面向过程 ...

  9. 基于containerd二进制部署k8s-v1.23.3

    文章目录 前言 k8s 组件 环境准备 创建目录 关闭防火墙 关闭selinux 关闭swap 开启内核模块 分发到所有节点 启用systemd自动加载模块服务 配置系统参数 分发到所有节点 加载系统 ...

  10. 『无为则无心』Python面向对象 — 45、面向对象编程

    目录 1.面向对象编程的概念 2.面向对象编程和面向过程编程的区别 (1)面向过程编程 (2)面向对象编程 3.举例理解面向对象 4.Python的面向对象编程 5.面向对象的几大核心特性 1.面向对 ...