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. C++ 互斥

    mutex mutex 类是能用于保护共享数据免受从多个线程同时访问的同步原语. mutex 提供排他性非递归所有权语义: 调用方线程从它成功调用 lock 或 try_lock 开始,到它调用 un ...

  2. #点分治，树状数组#洛谷 5311 [Ynoi2011] 成都七中

    题目 给你一棵 \(n\) 个节点的树,每个节点有一种颜色,有 \(m\) 次查询操作. 查询操作给定参数 \(l\) \(r\) \(x\),需输出: 将树中编号在 \([l,r]\) 内的所有节点 ...

  3. #点分树 or LCT#洛谷 4115 Qtree4

    两次LCT的Access操作就可以求LCA啦 题目 给出一棵树,支持单点反色和查询全局最远白点 分析(点分树) 点分树的做法就是考虑点分树上的父亲把子树分成若干个部分, 那么所谓的白点直径可以把子树的 ...

  4. AtCoder Beginner Contest 220

    传送门 A.B.C.D.F比较简单,没必要写出来 E - Distance on Large Perfect Binary Tree 题目 问一个深度为 \(n\)的满二叉树有多少个点对的距离恰好为 ...

  5. 使用OHOS SDK构建tinyexr

    参照OHOS IDE和SDK的安装方法配置好开发环境. 从github下载源码. 执行如下命令: git clone https://github.com/syoyo/tinyexr.git 进入源码 ...

  6. 资深技术笔译总结的这7条建议，看完提PR效率倍增

    战码先锋,PR征集令(以下简称"战码先锋")第二期正如火如荼地进行中,涉及OpenAtom OpenHarmony(以下简称"OpenHarmony")主干仓. ...

  7. 深度剖析：Dubbo使用Nacos注册中心的坑

    2020年笔者在做微服务部件升级时,Dubbo的注册中心从Zookeeper切换到Nacos碰到个问题,最近刷Github又有网友提到类似的问题,就在这篇文章里做个梳理和总结. 1.问题描述 前几年我 ...

  8. 学习Source Generators之打包成Nuget使用

    前面我们简单的实现了一个从swagger生成实体类的Generator,在实际使用中,通过nuget包引用使用会更方便,那么本篇文章将介绍如何将Generator打包成Nuget来使用. 打包Nuge ...

  9. 【直播回顾】Hello HarmonyOS进阶课程第四课——ArkUI动画开发

    5 月 25 日晚上 19 点,由知名HarmonyOS开发领域的up主九弓子主讲的Hello HarmonyOS进阶系列应用篇第四课<ArkUI动画开发>,在众多HarmonyOS社群内 ...

  10. css test-align 和 margin 居中什么区别

    共同点 test-align 和margin 都可以居中: test-align:Center. margin: 0 auto. 很好但是看下区别: <div style="backg ...