<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        #app{

            width: 200px;

            height: 200px;

            background-color: red;

            margin: 100px auto;

        }

    </style>

</head>

<body>

    <div id="app"></div>

    <script>

        const app = document.getElementById("app")

        const news = app.getBoundingClientRect()

        console.log(news.top,"top")

        console.log(news.right,"right")

        console.log(news.bottom,"bottom")

        console.log(news.left,"left")

    </script>

</body>

</html>

JS getBoundingClientRect（）的更多相关文章

  1. js中（）（）问题

    var aa=function(){}(); var bb=(function(){})(); 今天被问到这个问题,这段js有撒区别. 总结一下,两个函数都是立即执行的意思.但是不同之处是执行的顺序, ...

  2. js reduce（）方法使用

    reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值. reduce() 可以作为一个高阶函数,用于函数的 compose. 注意: reduce() 对 ...

  3. 你了解getBoundingClientRect（）？

    理解:getBoundingClientRect用于获取某个元素相对于视窗的位置集合.集合中有top, right, bottom, left等属性. 1.语法:这个方法没有参数. rectObjec ...

  4. 关于 js tofixed（）保留小数位数问题

    保留位数必须是数字 const num = parseFloat ('123456.33').tofixed(2); !!!! 注意 现在的的 num 是 字符串类型, 如果给它加数字的话,就会报错 ...

  5. js setTime（）详解

    来源:http://www.jb51.net/article/35535.htm#t1 setTimeout setTimeout 语法例子 用 setTimeout 来执行 function 不断重 ...

  6. node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  7. node.js学习（二）--Node.js控制台（REPL）&&Node.js的基础和语法

    1.1.2 Node.js控制台(REPL) Node.js也有自己的虚拟的运行环境:REPL. 我们可以使用它来执行任何的Node.js或者javascript代码.还可以引入模块和使用文件系统. ...

  8. 由js apply与call方法想到的js数据类型（原始类型和引用类型）

    原文地址:由js apply与call方法想到的js数据类型(原始类型和引用类型) js的call方法与apply方法的区别在于第二个参数的不同,他们都有2个参数,第一个为对象(即需要用对象a继承b, ...

  9. Node.js入门（一）

    一.Node.js本质上是js的运行环境. 二.可以解析js代码(没有浏览器安全级的限制): 提供系统级的API:1.文件的读写 2.进程的管理 3.网络通信 三.可以关注的四个网站: 1.https ...

随机推荐

  1. 42028: Assignment 1 – Autumn 2019

    42028: Assignment 1 – Autumn 2019 Page 1 of 4Faculty of Engineering and Information TechnologySchool ...

  2. win10环境下Android SDK下载安装及配置教程

    最近在配置Android环境时,发现网上许多教程都是在win7版本下进行配置的且存在许多问题,按照流程无法正确配置环境,因此我在收集网上资料及亲自配置成功的情况下,写出此文章.如有无法配置成功的话,欢 ...

  3. 用web技术写APP

    _ 听说会写web的人也能写APP, 抱着尝试的心态踏上路体验一番 http://www.ionic.wang/start-index.html 0x00 框架环境介绍 ionic是什么? https ...

  4. python一次性解压多层嵌套zip压缩包

    zip包里的结构不是固定的,有可能只需要解压一次就完成了,有可能解压后里面还存在zip文件,需要继续进行解压缩 写了个简单的递归函数来实现解压非固定结构zip包,若解压后的zip子目录下仍含有zip文 ...

  5. fastjson JSONObject遍历

    private static String getDesc(String jsonStr, String key) { JSONObject jsonObject = JSONObject.parse ...

  6. vi命令保存

    :q :退出编辑器 :q! :强制退出 :wq   :保存并退出 :wq! :保存并强制退出 ZZ :保存并退出 :x   :保存并退出

  7. html5+css基础

    最近在学习html+css3基础教程,整理了一些基础知识点.在此与大家分享. 1.盒模型 定义:css处理网页时,它认为每个元素都包含在一个不可见的盒子里,即我们所熟知的盒模型.其中它的主要属性有:h ...

  8. 本地Linux备份服务器[Client]定期备份云服务器[Server]上的文件(下)

    https://www.cnblogs.com/kevingrace/p/5972563.html Client上使用rsync命令查看服务器上文件列表rsync --list-only -e &qu ...

  9. U盘制作系统盘的方法:

    1, 使用 u 盘制作 ubuntu16.04 的方法, 安装软件后,直接使用软件将 U盘制作成系统盘就好了 [1] 下载安装工具: UltraISO  官网:  http://www.ezbsyst ...

  10. linux ping: unknown host www.baidu.com

    在虚拟机中使用CentOS6.5时,ping www.baidu.com出现报错信息:“ping: unknown hostwww.baidu.com”,虚拟机和物理机网络连接是NAT方式,物理机访问 ...