<!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. [dev] udp socket的read长度问题

    场景描述 我的两个程序需要彼此通信.采用unix socket来实现. 并为了简单起见使用了DGRAM,也就是udp通信. 问题描述 1. 用法是这样的 收包的一端使用epoll监听,发包端发送一个2 ...

  2. dlib编译成静态库及被其它程序调用

    一.git下载:https://github.com/davisking/dlib 官网:http://dlib.net/ 二.vs中编译成静态库 1.在vs2015中创建静态库工程(vs2015以上 ...

  3. vue设置背景图片

    现在data里面定义: note: { backgroundImage: "url(" + require("../../assets/home/bigdatabak.p ...

  4. js比较两个单独的数组或对象是否相等

    所谓js的中的传值,其实也就是说5种基本数据类型(null,undefind,boolean,number,string) 传引用也就是说的那个引用数据类型,(array和object) 基本数据类型 ...

  5. svg合并

    假如页面有多个svg图标要加载,多次加载不利,可将多个svg合并为一个加载 如下有两个svg <svg xmlns="http://www.w3.org/2000/svg" ...

  6. 使用dbms_profiler收集存储过程每步执行时间

    最近和优化团队的专家学到一个很有意义的内置包:dbms_profiler,专门用于分析Oracle存储过程中的各段代码的时间开销情况,从而快速找到性能瓶颈的步骤. 1.sys创建dbms_profil ...

  7. spring IOC 分析及实现

    什么是IOC Inversion of Control,控制反转,也成依赖倒置. 反转: 依赖对象的创建被反转,使用IOC之前,对象由自己创建,反转后,由IOC容器获取 IOC容器的工作: 负责创建, ...

  8. G面经Prepare: Longest All One Substring

    give a string, all 1 or 0, we can flip a 0 to 1, find the longest 1 substring after the flipping 这是一 ...

  9. PHP 获取一篇文章内容中的全部图片，并下载

    做个记录,在工作or面试中有可能会遇到function downImagesFromTargetUrl($url, $target_dir = null) { if(!filter_var($url, ...

  10. 最新阿里云服务器免费SSL证书配置HTTPS的两种方法（图文教程二）

    在大家学习如何利用免费SSL证书配置网站HTTPS之前,我们先要搞清楚为什么要开启HTTPS,这个绿色的小锁真的有用吗?所谓的HTTPS其实是(安全套接字层超文本传输协议)是以安全为目标的HTTP通道 ...