DOMRect 表示的盒子的类型由返回它的方法或属性指定。例如，WebVR API 的 VREyeParameters.renderRect (en-US) 指定了头戴式显示器的一只眼睛应该呈现的影像所在的 canvas 的视口。

https://developer.mozilla.org/zh-CN/docs/Web/API/DOMRect

DOMRect对象包含了元素的大小以及相对于视口的位置，它包含了下面的属性和方法：

x：元素的左上角的水平坐标

y：元素的左上角的垂直坐标

width：元素的宽度

height：元素的高度

top：元素的上边界距离页面顶部的距离

right：元素的右边界距离页面左边的距离

bottom：元素的下边界距离页面顶部的距离

left：元素的左边界距离页面左边的距离

toString()：返回一个字符串，包含了上述信息

DOMRect对象的更多相关文章

  1. JavaScript中尺寸、坐标

    测试环境是IE8,Chrome38,Firefox40,下面是全局通用脚本打印代码 /** * 打印 */ function write(str) { document.write(str + '&l ...

  2. Javascript操作DOM常用API总结

    基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这 ...

  3. JavaScript常见原生DOM操作API总结

    [TOC] 最近面试的时候被这个问题给卡了,所以抽时间好好复习一下. 几种对象 Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它,都共享着相同的基本属性和方法.常见的Node ...

  4. JavaScript原生DOM操作API总结

    最近面试的时候被这个问题给卡了,所以抽时间好好复习一下. 原文:http://www.cnblogs.com/liuxianan/p/javascript-dom-api.html 几种对象 Node ...

  5. JavaScript 操作 DOM 常用 API 总结

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

  6. 常用DOM API

    Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它,都共享着相同的基本属性和方法.常见的Node有 element,text,attribute,comment,documen ...

  7. 【全面总结】js获取元素位置大小

    [js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...

  8. css响应式布局

    以设计稿为准,假设设计稿竖屏宽度为750px,取根元素的font-size为50px 在iphone6(375px)下,deviceWidth=7.5rem, 这个就是viewPort中的device ...

  9. vue-eleme 学习笔记

     # watch 用法 (1).普通的watch <div style="margin-top: 60px;"> {{common}} <button @clic ...

  10. Top值

    业务开发中经常会用到元素或者浏览器窗口的各种top值,最近开发组件的过程中也遇到各种问题,因此决定好好总结一下. 常见的top值 scrollTop Element.scrollTop 属性可以获取或 ...

随机推荐

  1. #随机#CF1198F GCD Groups 2

    题目 将 \(n\) 个数分为两组,使得两组的GCD都为1,求具体的分组情况 分析 考虑直接打乱 \(n\) 个数,如果能使第一组GCD减小就减小,否则丢到第二组, 由于打乱后出错的概率会减小,所以r ...

  2. #树套树，二维线段树#HDU 4819 Mosaic

    题目 多组数据,给定一个\(n*n\)的矩阵(\(n\leq 80,a_{i,j}\leq 10^9\)) 多组询问一个以\((x,y)\)为中心,边长为\(L\)的子矩阵最大值\(mx\)和最小值\ ...

  3. #Tarjan，SPFA，差分约束系统#BZOJ 2330 AcWing 368 银河

    题目 分析 首先这明显是一道差分约束题,但是无解的情况确实比较恶心, 考虑它的边权为0或1,无解当且仅当某个强连通分量内的边至少一条边边权为1, 那么用有向图的Tarjan缩点后跑SPFA就可以了 代 ...

  4. Redis 19 SpringBoot集成

    概述 SpringBoot 整合 Redis 是使用 SpringData 实现的. SpringData 是与 SpringBoot 齐名的顶级项目,整合了对常用数据库的模板型操作. 在 Sprin ...

  5. Python设计模式----2.工厂模式

    工厂方法模式是简单工厂模式的衍生,解决了许多简单工厂模式的问题 首先完全实现'开-闭 原则',实现了可扩展.其次更复杂的层次结构,可以应用于产品结果复杂的场合. 工厂方法模式的对简单工厂模式进行了抽象 ...

  6. 如何用 Prometheus Operator 监控 K8s 集群外服务?

    前言 前面系列文章中: Prometheus Operator 与 kube-prometheus 之一 - 简介 - 东风微鸣技术博客 (ewhisper.cn) 监控 Kubernetes 集群证 ...

  7. 20个Python 正则表达式应用与技巧

    本文分享自华为云社区<Python 正则表达式大揭秘应用与技巧全解析>,作者:柠檬味拥抱. Python 中的 re 模块是用于处理正则表达式的强大工具.正则表达式是一种用来匹配字符串的模 ...

  8. NL2SQL进阶系列(1)：DB-GPT-Hub、SQLcoder、Text2SQL开源应用实践详解

    NL2SQL进阶系列(1):DB-GPT-Hub.SQLcoder.Text2SQL开源应用实践详解 NL2SQL基础系列(1):业界顶尖排行榜.权威测评数据集及LLM大模型(Spider vs BI ...

  9. VS2019 community版本下载Extension太慢解决方案

    VS2019 community版本下载Extension太慢解决方案 今天在VS2019上更新Live Share拓展时,实在是太慢了,一直卡在如下界面.不过,除了没有进度条和速度很慢,还是可以下载 ...

  10. Mybatis终极案例之注解开发

    Mybatis终极案例之注解开发 一.注解开发实现CURD操作 1.环境搭建 参考入门案例,环境搭建主要分为如下几步: 1.配置pom.xml <packaging>jar</pac ...