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. Java-JFrame开发汇总整理

    Java-JFrame开发汇总整理 在CS框架下,可以通过java代码开发JFrame弹窗体的功能,即类似于QQ登录等安装在计算机中的程序,通过java开发CS中C即客户端的一般用到的知识点如下: 一 ...

  2. Python模块(二)(序列化)

    1. namedtuple 命名元组->类似创建了一个类 from collections import namedtuple p = namedtuple("Point", ...

  3. ACM-ICPC 2018 徐州赛区网络预赛 F. Features Track

    262144K   Morgana is learning computer vision, and he likes cats, too. One day he wants to find the ...

  4. 15年多校第一场七题hdu5294

    要做这题,先要明白图的割,说白了就是 为了让原点无法到汇点要删几条边(之所以叫割,就是在图面上切一刀,减掉最小的边是原点和汇点成为两个集合),想到了割先放着一会用. 题中说只有沿最短路走才有可能追上, ...

  5. Linux内存cache/buffer剖析

    查询linux系统中空闲内存/内存使用状态查看/剩余内存查看 如何计算内存的使用量及空闲量 物理已用内存 = 实际已用内存 - 缓冲 - 缓存              =  24752  - 283 ...

  6. 大数据学习——KETTLE入门学习——kettle安装

    https://blog.csdn.net/u012637358/article/details/82593492 下载的kettle是汉化的 改成英文的 工具——选项——选择英文

  7. web自动化之selenium

    一.Selenium(http://www.selenium.org/) Web自动化测试工具.它支持各种浏览器,包括Chrome,Safari,Firefox等主流界面式浏览器,如果你在这些浏览器里 ...

  8. 设计模式之单例模式 Singleton实现

    饿汉式 饿汉式单例模式,static变量会在类装载时初始化,此时也不会涉及多个线程对象访问该对象的问题.虚拟机保证只会装载一次该类,肯定不会发生并发访问的问题, 因此可以省略synchronized关 ...

  9. django model的设计

    1 设计blog的显示界面: 在blog/admin.py修改 from django.contrib import admin from blog.models import BlogPost # ...

  10. linux下文件显示被加锁如何解决？

    1.很多时候从别的机器上拷贝过来的文件,没有权限打开,上面有一个小锁. 2.判断是权限没有,查询ls -al得知文件的的所有者,和所有者在的组都不是本机 3.使用chown改变用户的所有者和所有者所在 ...