首页 > 其他分享 >JS | getBoundingClientRect()方法的基本使用

JS | getBoundingClientRect()方法的基本使用

时间:2022-09-05 00:44:16浏览次数:74  
标签:getBoundingClientRect 元素 JS height width 矩形 方法 页面

Element.getBoundingClientRect() 方法返回一个 DOMRect 对象,其提供了元素的大小及其相对于视口的位置。

返回的对象中有几个只读属性:

width / x:元素矩形的宽度
height / y:元素矩形的高度
top:元素矩形顶部到页面顶部的距离
right:元素矩形右侧到页面左侧的距离
bottom: 元素矩形底部到页面顶部的距离
left:元素矩形左侧到页面左侧的距离

盒子模型的影响

如果是正常的盒子模型,宽/高是 width / height + padding + border 的总和
但如果盒子模型为 border-box,那盒子的宽 / 高就是 width / height 了

image

标签:getBoundingClientRect,元素,JS,height,width,矩形,方法,页面
From: https://www.cnblogs.com/bkzj/p/16656634.html

相关文章

  • C# 手动终止async/await异步方法的几种实现
     终止异步方法的实现主要依靠 CancellationToken类 usingSystem;usingSystem.Net.Http;usingSystem.Threading;usingSystem.Threading.Tasks;namespaceC......
  • 【JS每日一题】Array.reduce函数
    题目题目来源于前端面试题宝典[[0,1],[2,3]].reduce((acc,cur)=>{returnacc.concat(cur)},[1,2])解析[1,2]会作为初始值首次放入到第一个参数......
  • ECHART的使用方法
    项目中需要使用图表,最初使用的.NET自带的MSChart控件,做出来的效果不太好,所以又使用了Echarts控件。MSChart源码放在最后,可自行下载查看。Echarts是一个基于JavaScript......
  • 【JS】112. 路径总和
    112.路径总和代码DFSvarhasPathSum=function(root,targetSum){//找到没有根了,那么就说明这条路行不通if(!root){returnfalse;}//......
  • python篇-魔术方法
    '''__getattribute__触发时机:访问对象成员的时候就会触发,无论成员是否存在作用:可以在舒勇获取数据的时候进行数据处理等操作参数:一个self接受当前对象,另一个参数接受访......
  • 2022-08-27 田龙跃 web前端(JS)
    原生JS数据类型Number-数字String-字符串Boolean-布尔型null-空undefined-未定义变量(同var功能相同)letnum1=“das”(let会自己检查变量是否重复定义)constnum......
  • gcc-arm-none-eabi工具链工具使用方法及介绍
    为了方便自己在学习过程中查看一些工具的使用方法,将其搬运到自己的创作空间原文链接:STM32高级开发(5)-gcc-arm-none-eabi_Foresights的博客-CSDN博客_arm-none-eabi-gccg......
  • 《计算机网络-自顶向下方法》学习笔记
    TCP和UDPTCP服务TCP服务模型包括面向连接和可靠数据传输服务。当某个应用程序调用TCP作为其运输服务协议时,该应用程序就能获得来自TCP的这两种服务。面向连接的服......
  • CSS JS 规范+数据类型
    1、CSSJS规范+数据类型window.onload=function(){​//varstr='abc';​//varnum=123;​//varbool=true;​//varund=undefined;......
  • Java邮件发送中的setRecipient方法使用
    Java邮件发送中的setRecipient方法使用一、方法setRecipient(Message.RecipientTypetype,Addressaddress),是用于设置邮件的接收者。1、有两个参数,第一个参数是接收者的......