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. centos7安装pgsql及操作命令

    1.下载所需要的数据库版本https://yum.postgresql.org/repopackages.php 2.安装数据库版本包 yum install -y https://download. ...

  2. Laravel中chunk组块结果集处理

    如果你需要处理成千上万个 Eloquent 结果,可以使用 chunk 命令.chunk 方法会获取一个“组块”的 Eloquent 模型,并将其填充到给定闭包进行处理.使用 chunk 方法能够在处 ...

  3. python有三元运算符吗

    所属网站分类: python基础 > 语法,变量,运算符 作者:goodbody 链接: http://www.pythonheidong.com/blog/article/12/ 来源:pyt ...

  4. LeetCode（234） Palindrome Linked List

    题目 Given a singly linked list, determine if it is a palindrome. Follow up: Could you do it in O(n) t ...

  5. isinstance() 函数

    Python3 isinstance() 函数   描述 isinstance() 函数来判断一个对象是否是一个已知的类型,类似 type(). isinstance() 与 type() 区别: t ...

  6. Linux学习-Linux 的开机流程分析

    开机流程一览 系统开机的经过可以汇整成底下的流程的: 加载 BIOS 的硬件信息与进行自我测试,并依据设定取得第一个可开机的装置; 读取并执行第一个开机装置内 MBR 的 boot Loader (亦 ...

  7. python基础学习笔记——类空间问题以及类之间的关系

    一. 类的空间问题 1.1 何处可以添加对象属性 class A: def __init__(self,name): self.name = name def func(self,sex): self ...

  8. PYday16&17-设计模式\选课系统习题

    1.设计模式:对程序做整体得规划设计,这样做是为了更好的实现功能,使代码的可扩展性更好有27种常见的设计模式.流行的设计模式参考书:GoF设计模式.大话设计模式设计模式是为了更好的实现模块间的解耦,便 ...

  9. GridView的RowCommand事件中获取每行控件的值

    //获取当前行                GridViewRow gvr = (GridViewRow)((Control)e.CommandSource).Parent.Parent; //获取 ...

  10. 根据已经commit的数据，进行leader和peon之间的同步

    Leader Election基本设计 按照rank表示优先级解决冲突问题,为每个monitor预先分配了一个rank 只会接受优先级(rank)比自己高.epoch比上次已接受的epoch大的选举请 ...