1. getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

语法：这个方法没有参数

rectObject = object.getBoundingClientRect();

返回值类型：TextRectangle对象，每个矩形具有4个整数性质（上右下左）表示的坐标的矩形，以像素为单位。

　rectObject.top：元素上边到视窗上边的距离;

　rectObject.right：元素右边到视窗左边的距离;

　rectObject.bottom：元素下边到视窗上边的距离;

　rectObject.left：元素左边到视窗左边的距离;

搬运工：http://www.cnblogs.com/Songyc/p/4458570.html

获取某个元素相对于视窗的位置-getBoundingClientRect的更多相关文章

  1. 获取某个html元素相对于视窗的位置集合

    getBoundingClientRect() getBoundingClientRect()获取元素位置,这个方法没有参数 getBoundingClientRect()用于获得页面中某个元素的左, ...

  2. js获取html元素在可视区域的位置

    1)html节点在可视区域的位置 obj.getBoundingClientRect().top obj.getBoundingClientRect().left 2) 获取鼠标按下的位置 event ...

  3. vue 组件传递值以及获取DOM元素的位置信息

    1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...

  4. 我的前端工具集（八）获得html元素在页面中的位置

    我的前端工具集(八)获得html元素在页面中的位置   liuyuhang原创,未经允许禁止转载 目录 我的前端工具集 有时候需要用点击等操作,来获取某元素在页面中的位置,然后在该位置添加某些操作 如 ...

  5. getBoundingClientRect() 来获取页面元素的位置

    getBoundingClientRect() 来获取页面元素的位置   document.documentElement.getBoundingClientRect 下面这是MSDN的解释: Syn ...

  6. 用getBoundingClientRect()来获取页面元素的位置

    以前绝大多数的使用下面的代码来获取页面元素的位置: [code="javascript"]var _x = 0, _y = 0;do{_x += el.offsetLeft;_y ...

  7. getBoundingClientRect获取元素在页面上的位置

    getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置. getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起 ...

  8. JQuery 获取页面某一元素在屏幕上的位置

    获取页面某一元素的绝对X,Y坐标 var X = $('#ElementID').offset().top;//元素在当前视窗距离顶部的位置 var Y = $('#ElementID').offse ...

  9. 用Javascript获取页面元素的位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...

随机推荐

  1. php curl使用例子

    PHP支持的由Daniel Stenberg创建的libcurl库允许你与各种的服务器使用各种类型的协议进行连接和通讯.libcurl目前支持http.https.ftp.gopher.telnet. ...

  2. ubuntu下RedisDesktopManager的安装，redis可视化工具

    官方网站:https://redisdesktop.com/download 一句命令行解决: sudo snap install redis-desktop-manager 或者直接通过软件管理中心 ...

  3. list 方法总结整理

    #!/usr/bin/env python #Python 3.7.0 列表常用方法 __author__ = "lrtao2010" #创建列表 # a = [] # b = [ ...

  4. 20181206（re，正则表达式，哈希）

    1.re&正则表达式 2.hashlib 一:re模块&正则表达式 正则:正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法.或者说:正则就是用来描 ...

  5. nrf51822微信开发入门学习笔记1：开始前的准备

    参考:(id:love--baby)https://blog.csdn.net/hunhun1122/article/details/68922493 微信硬件平台:https://iot.weixi ...

  6. leetcode-24-exercise

    506. Relative Ranks 解题思路: 使用priority_queue.它在插入时会将数据按照由大到小的顺序插入,自然排序了.所以插入时考虑插入pair<nums[i],i> ...

  7. 加密javascript代码

    最近看了个js日历,里面用到了加密,看了下,自己也模仿做加密,现在只能加密一般的javascript语句 <!DOCTYPE html> <html> <meta htt ...

  8. [python学习篇][廖雪峰][1]高级特性 ---迭代

    由于字符串也是可迭代对象,因此,也可以作用于for循环: >>> for ch in 'ABC': ... print ch ... A B C 所以,当我们使用for循环时,只要作 ...

  9. [git 学习篇]删除文件

    1 现在本地文件管理器删除了readme.txt(这个readme.txt已经在创库存在的) rm -rf readme.txt 2 此时git status查看 $ git status # On ...

  10. Springmvc web项目初始化

    Web容器首先会读取项目中的web.xml配置文件中的两个节点:<context-param>与<listener> Web容器创建ServletContext对象即Servl ...