<!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. 深度学习基础（四） Dropout_Improving neural networks by preventing co-adaptation of feature detectors

    该笔记是我快速浏览论文后的记录,部分章节并没有仔细看,所以比较粗糙. 从摘要中可以得知,论文提出在每次训练时通过随机忽略一半的feature detectors(units)可以极大地降低过拟合.该方 ...

  2. [LeetCode] 55. Jump Game_ Medium tag: Dynamic Programming

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  3. 67.web--手机端兼容性问题

    H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initia ...

  4. 微信小程序案例大全

    微信小程序demo:足球,赛事分析 小程序简易导航 小程序demo:办公审批 小程序Demo:电魔方 小程序demo:借阅伴侣 微信小程序demo:投票 微信小程序demo:健康生活 小程序demo: ...

  5. 配置php环境的一个nginx.conf

    文件:nginx.conf 内容: #user  nobody;worker_processes  1; #error_log  logs/error.log;#error_log  logs/err ...

  6. 【转】jenkins自动化部署项目7 -- 新建job（将服务代码部署在windows上）

    关于构建结束后jenkins会kill所有衍生子进程的官方解决方案:https://wiki.jenkins.io/display/JENKINS/Spawning+processes+from+bu ...

  7. ansible批量管理

    编写批量安装脚本 [root@m01 scripts]# vim install.sh for ip in $* do echo "=======start install to $ip = ...

  8. Github-记账本

  9. es7,es8

    ES7新特性 ES7在ES6的基础上添加了三项内容:求幂运算符(**).Array.prototype.includes()方法.函数作用域中严格模式的变更. Array.prototype.incl ...

  10. ametuer technology

    1. eclipse build output/ .s37 not big enough (about 1.23M) Brose Setting: Build command must be BUIL ...