javascript 温故而知新 getBoundingClientRect

getBoundingClientRect获取元素位置

getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。

getBoundingClientRect()最先是IE的私有属性，现在已经是一个W3C标准。所以你不用当心浏览器兼容问题，不过还是有区别的：IE只返回top,lef,right,bottom四个值，不够可以通过以下方法来获取width,height的值：

var ro = object.getBoundingClientRect();
var Width = ro.right - ro.left;
var Height = ro.bottom - ro.top;

兼容所有浏览器写法：

var ro = object.getBoundingClientRect();
    var Top = ro.top;
    var Bottom = ro.bottom;
    var Left = ro.left;
    var Right = ro.right;
    var Width = ro.width||Right - Left;
    var Height = ro.height||Bottom - Top;

有了这个方法，获取页面元素的位置就简单多了:

var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

转载于:https://www.cnblogs.com/CyLee/p/6729619.html

javascript 温故而知新 getBoundingClientRect相关推荐

JavaScript中getBoundingClientRect()方法详解
JavaScript中getBoundingClientRect()方法详解 getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bo ...
JavaScript 温故而知新（一）语法
文章目录 javaScript的组成在HTML中使用JavaScript JavaScript的注释与分号 JAVAScript的语法 JAVAScript的标识符 JAVAScript的变量 Ja ...
Python 02 Selenium 账号密码登录CSDN
Python selenium 账号密码登录CSDN from time import sleep from selenium import webdriverdef login():url = 'h ...
Mysql日期时间格式化 %Y-%m-%d %H:%i:%S
获取当前时间戳 mysql> select unix_timestamp(now()); +-----------------------+ | unix_timestamp(now()) | ...
JS+BOM+DOM汇总
文章目录前言:JavaScript的发展史第一章:BOM 1.1.概念 1.2.组成:window.Navigator.Screen. History.Location 1.3.方法第二章:DO ...
移动端字体大小单位rem
首先先将几个主要概念讲一下: 什么是移动端? :移动端故名思义是为移动终端,大名叫移动通信终端,是指可以在移动中使用的计算机设备.其实就是我们常说的手机. 什么是布局? :对事物的全面规划和安排,布 ...
java selenium一一操作定位元素
java selenium操作定位元素 1.元素选择策略 1.1.使用选择器的提示 2.定位元素 3.定位多个元素 4.相对定位 4.1.above() 1.元素选择策略 WebDriver 中有 8 ...
new 操作符具体干了什么
一.定义 new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一在创建一个新的实例的时候,必须使用 new 操作符.而使用 new 操作符会经历以下 4 个步骤: 创建一个新 ...
Selenium 008 WebDriver 文档
WebDriver 文档入门指南 WebDriver 以本地化方式驱动浏览器,就像用户在本地或使用 Selenium 服务器的远程机器上所做的那样,这标志着浏览器自动化的飞跃. Selenium W ...

javascript 温故而知新 getBoundingClientRect

javascript 温故而知新 getBoundingClientRect相关推荐

最新文章

热门文章