<!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. promise 的学习

    promise 是为了解决异步操作的顺序问题而产生的 特性 promise 的实例一旦创建就会执行里面的异步操作 promise 的实例状态一旦改变就变成凝固的了, 无法再对其作出修改,  (不明白为 ...

  2. js对重复数组去重

    var arr=[1,1,1,1,2,2,2,3,3,4,1,4,5,7,8,7,7] let m = {} arr.filter(item => m[item] >= 1 ? false ...

  3. jacoco统计server端功能测试覆盖率

    jacoco可以统计,功能测试时,server代码调用的覆盖情况.这里对服务器端的java代码进行统计.   操作步骤如下:   第一步:更改server的启动脚本,使用jacocoagent.jar ...

  4. 插入排序（JAVA实现）

    算法思想: 插入排序就是每一步都将一个待排数据按其大小插入到已经排序的数据中的适当位置,直到全部插入完毕 下图演示了对4个元素进行直接插入排序的过程,共需要(a),(b),(c)三次插入. 代码实现: ...

  5. 如何优雅的运行起jmeter

    安装jdk 下载网站:http://www.oracle.com/,选个最新的版本就可以. 注意:11以后没有自动生成jre 配置环境变量 对于Java程序开发而言,主要会使用JDK的两个命令:jav ...

  6. 使用easyui搭建网页架子

    使用踩坑: 一.弹出框上datagrid第二次加载数据,必须在显示状态,datagrid加载数据才会渲染,否则是空白 $('#xq_selKs').window('open').window('cen ...

  7. allegro17.2 错误记录

    1.网表导入PCB时出现如下错误::error with pin number 'P11'in device ' lfbga176'::Unable to find pin name in adfnc ...

  8. 迁移svn项目到git

    women用的gitlab 在gitlab新建项目,然后拉项目拉下来,然后你把项目(vue)全部选中,除开node_modeles  .svn  dist  .idea这些不选外,copy到这个拉下来 ...

  9. Nodejs在Ubuntu的部署和配置 samba

    在Ubuntu上安装samba 在10.04上安装samba时,先把samba卸载,不然会影响后面的安装. 0.卸载samba sudo apt-get remove samba-common sud ...

  10. Redis哨兵模式（sentinel）部署记录（主从复制、读写分离、主从切换）

    部署环境: CentOS7.5  192.168.94.11 (master) 192.168.94.22 (slave0) 192.168.94.33 (slave1) 192.168.94.44 ...