<!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. Python extend()方法--list

    描述 extend()方法:在列表末尾追加可迭代对象中的元素. 语法 语法格式:list.extend(iterable) 参数 iterable:可迭代的对象,这里的对象可以是字符串.列表.元组.字 ...

  2. VisualStudioCode创建的asp.net core项目部署到linux，使用nginx代理

    1.准备工作: a:使用VisualStudioCode创建asp.net core项目,并使用命令“dotnet publish”发布(可以参考前面两篇文章). 如:dotnet publish - ...

  3. org.hibernate.HibernateException: Duplicate identifier in table for: Waa

    提示表的标识符重复,发现是数据库中的主键id重复了.因为是序列自动生成的. 我原本以为是因为我的序列的问题,序列.nextval()有问题,但是当我在数据库测试时,发现当前序列没有问题.但是当数据插入 ...

  4. 4.hadoop的安装与配置

    1.下载hadoop-2.6.2.tar.gz. 2.复制hadoop-2.6.2.tar.gz到/usr/local/目录下. 3解压 #tar  -zxvf  hadoop-2.6.2.tar.g ...

  5. spy-debugger 安装以及使用

    参考链接:https://github.com/wuchangming/spy-debugger

  6. Python多线程下存在_strptime的问题

    由于Python的datetime和time中的_strptime方法不支持多线程,运行时会报错:AttributeError: _strptime code: # -*- coding:utf-8 ...

  7. python类与对象-如何派生内置不可变类型并修其改实例化行为

    如何派生内置不可变类型并修其改实例化行为 问题举例 自定义一种新类型的元组,对传入的可迭代对象,我们只保留 其中int类型且值大于0的元素,例如 IntTuple([1, -1, 'abc', 6, ...

  8. Nginx配置不当可能导致的安全问题

    Nginx配置不当可能导致的安全问题 Auther: Spark1e目前很多网站使用了nginx或者tenginx(淘宝基于Nginx研发的web服务器)来做反向代理和静态服务器,ningx的配置文件 ...

  9. Asp.net Image控件显示Bitmap生成图像

    from:https://blog.csdn.net/qq_29011299/article/details/81137980 using(Bitmap bmp=new Bitmap(300,50)) ...

  10. web自动化测试python+selenium学习总结----selenium安装、浏览器驱动下载

    一.安装selenium 命令安装selenium库 :pip  install -U selenium 查看selenium是否安装成功:pip list PS:有时会有异常,安装失败,可以尝试去s ...