<!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. Luogu4197 Peaks

    题目链接:洛谷 看到“只经过困难值小于等于$x$的路径”. 感觉有点眼熟. ow,就是[NOI2018]归程. 和那道题一样,可以直接建出Kruskal重构树,每次倍增寻找祖先中最上面的不大于$x$的 ...

  2. Asp.net MVC WebApi项目的自动接口文档及测试功能打开方法

    https://blog.csdn.net/foren_whb/article/details/78866133

  3. Ubuntu16.04调整屏幕分辨率至1920*1080

    安装好ubuntu 16.04桌面版后,发现屏幕分辨率调整选项里没有1920*1080这一选项,经过一番查找,可通过如下方式进行屏幕分辨率设置.以下操作均在ubuntu 16.04桌面版操作,不要用远 ...

  4. JavaWeb学习之三层架构实例（三）

    引言 通过上一篇博客JavaWeb学习之三层架构实例(二)我们基本上已经实现了对学生信息列表的增删改查操作(UI除外),但是不难看出,代码冗余度太高了,尤其是StudentDao这个类,其中的增删改查 ...

  5. AIX 7.1 RAC 11.2.0.4.0升级至11.2.0.4.6(一个patch跑了3个小时)

    1.环境 DB:两节点RAC 11.2.0.4.0升级至11.2.0.4.6 OS:AIX 7.1(205G内存 16C) 2.节点1.节点2(未建库) 2.1.patch 20420937居然用了3 ...

  6. adobe air for ios 应用完成appstore评论

    1,跳转到App Store:NSString *str = [NSString stringWithFormat:@"http://itunes.apple.com/us/app/id%d ...

  7. linux中巧用ctrl-z后台运行程序

    我们知道后台运行任务时,可以用 () 和 &,但是有的时候我们会忘记加&,对于执行需要很长时间的任务来说,Ctrl+Z可能是一个比较好的把任务转入后台的方法. 当我们按下Ctrl+Z时 ...

  8. mysql千万级大数据SQL查询优化30条经验

    转自http://blog.163.com/zhangjie_0303/blog/static/9908270620146951355834/ 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 w ...

  9. 【Python学习】iterator 迭代器小练习

    http://anandology.com/python-practice-book/iterators.html  Problem 1: Write an iterator class revers ...

  10. Ajax请求二进制流并在页面展示

    后端代码: public void getIntegralQrcode(HttpServletResponse response, String token) throws BizException, ...