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. 一篇文章了解CI/CD管道全流程

    从CI/CD过程开始,包含所有阶段并负责创建自动化和无缝的软件交付的一系列步骤称为CI/CD管道工作流.使用CI/CD管道,软件发布工件可以从代码提交阶段到测试.构建.部署和生产阶段在管道中移动和前进 ...

  2. Go 语言之 Maps 详解：创建、遍历、操作和注意事项

    Maps 用于以键值对的形式存储数据值.Maps中的每个元素都是一个键值对.Maps是一个无序且可更改的集合,不允许重复.Maps的长度是其元素的数量.您可以使用 len() 函数来查找长度.Maps ...

  3. 预约直播|3月30日下周四，应用促活大揭秘，快速提升DAU

    [导读] 日常运营过程中,消息推送是App触达用户的常用手段,无论是新功能的通知,还是活动的提醒,都可以通过推送告知用户.千人千面的个性化推送,对于提升用户粘性.用户转化等指标都具有明显正向效果.越来 ...

  4. 基于OT与CRDT协同算法的文档划词评论能力实现

    基于OT与CRDT协同算法的文档划词评论能力实现 当我们实现在线文档平台时,划词评论的功能是非常必要的,特别是在重文档管理流程的在线文档产品中,文档反馈是非常重要的一环,这样可以帮助文档维护者提高文档 ...

  5. 实训篇-JavaScript-打地鼠

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

  6. i-MES生产制造管理系统-老化时间管控

    在生产过程中,产品的可靠性是影响其性能和寿命的关键因素,因此提高产品的可靠性是十分必要的,而老化测试是提高产品可靠性的重要手段之一,老化的时间随着产品不同而变化,因此老化时间管控变得尤为重要! 在ME ...

  7. locust的 -T，--tags使用

    官网的TAG配置说明:-T [TAG [TAG ...]], --tags [TAG [TAG ...]]List of tags to include in the test, so only ta ...

  8. next.js app目录 i18n国际化简单实现

    最近在用next写一个多语言的项目,找了好久没找到简单实现的教程,实践起来感觉都比较复杂,最后终于是在官方文档找到了,结合网上找到的代码demo,终于实现了,在这里简单总结一下. 此教程适用于比较简单 ...

  9. 力扣58(java)-最后一个单词的长度（简单）

    题目: 给你一个字符串 s,由若干单词组成,单词前后用一些空格字符隔开.返回字符串中 最后一个 单词的长度. 单词 是指仅由字母组成.不包含任何空格字符的最大子字符串. 示例 1: 输入:s = &q ...

  10. PolarDB-X 发布 2.1.0 版本，Paxos 重磅开源

    ​简介:2022年4月1号,PolarDB-X 正式开源X-Paxos,基于原生MySQL存储节点,提供Paxos三副本共识协议,可以做到金融级数据库的高可用和容灾能力,做到RPO=0的生产级别可用性 ...