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;
javascript 温故而知新 getBoundingClientRect的更多相关文章
- JavaScript中getBoundingClientRect()方法详解
获取浏览器滚动的高度: scrollTop=document.documentElement.scrollTop || document.body.scrollTop getBoundingClien ...
- javascript: Element.getBoundingClientRect() 获取元素在网页上的坐标位置
来自:https://blog.csdn.net/weixin_42895400/article/details/81811095?utm_source=blogxgwz1 Element.getBo ...
- javascript 基础教程[温故而知新一]
子曰:“温故而知新,可以为师矣.”孔子说:“温习旧知识从而得知新的理解与体会,凭借这一点就可以成为老师了.“ 尤其是咱们搞程序的人,不管是不是全栈工程师,都是集十八般武艺于一身.不过有时候有些知识如果 ...
- 【温故而知新-Javascript】使用地理定位
地理定位(Geolocation)API让我们可以获取用户当前地理位置的信息(或者至少是正在运行浏览器的系统的位置).它不是HTML5规范的一部分,但经常被归组到与HTML5相关的新功能中. 1. 使 ...
- 【温故而知新-Javascript】使用拖放
HTML5 添加了对拖放(drag and drop)的支持.我们之前只能依靠jQuery 这样的JavaScript库才能处理这种操作.把拖放内置到浏览器的好处是它可以正确的集成到操作系统中,而且正 ...
- 【温故而知新-Javascript】使用canvas元素(第二部分)
本文将继续介绍canvas的功能,展示如何绘制更复杂的图形(包括圆弧和曲线),如何使用剪裁区域来限制操作以及如何绘制文本.还是介绍可以应用在画布上的特效和变换,包括阴影.透明度.旋转和坐标重映射. 1 ...
- 【温故而知新-Javascript】使用canvas元素(第一部分)
1. 开始使用 canvas 元素 canvas 元素非常简单,这是指它所有的功能都体现在一个JavaScript对象上,因此该元素本身只有两个属性:width 和 height. canvas 元素 ...
- 【温故而知新-Javascript】使用 Ajax(续)
1. 准备向服务器发送数据 Ajax 最常见的一大用途是向服务器发送数据.最典型的情况是从 客户端发送表单数据,即用户在form元素所含的各个 input 元素里输入的值.下面代码展示了一张简单的表单 ...
- 【温故而知新-Javascript】使用 Ajax
Ajax 是现代Web 应用程序开发的一项关键工具.它让你能向服务器异步发送和接收数据,然后用 Javascript 解析. Ajax 是 Asynchronous JavaScript and XM ...
随机推荐
- cmake add_executable 与 include_directories
在cmake里add_executable里如果没有包含.cpp文件,该.cpp文件就不适用include_directories包含文件
- 在16aspx.com上下了一个.net程序,怎么修改它的默认登录名和密码?
正常应该有个login.aspx文件,找到登入按钮事件,查看验证用户名密码事件,这个验证就有去搜索用户表,然后在这个用户表修改用户名密码就行了.不排除其他表有用用户名关联
- csu1811(树上启发式合并)
csu1811 题意 给定一棵树,每个节点有颜色,每次仅删掉第 \(i\) 条边 \((a_i, b_i)\) ,得到两颗树,问两颗树节点的颜色集合的交集. 分析 转化一下,即所求答案为每次删掉 \( ...
- N皇后问题(C++实现和函数式编程实现)
题意 在 N * N 的方格棋盘放置了 N 个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上.求出有多少种合法的放置方法. C++实现(位运算 ...
- jsp笔记1(基本原理与语法)
web.xml文件配置管理的范围: 1.配置jsp 2.配置和管理Servlet 3.配置和管理Listener 4.配置和管理Filter 5.配置标签库 6.配置jsp属性 7.配置和管理JAAS ...
- iOS 7.1 arm64 编辑报错 警告解决办法
昨天把我的4S更新到iOS7.1,今天发下需要更新Xcode到5.1,发现打包项目Archive的时候,多了一堆警告和错误,很是郁闷. 郁闷没有用,作为一个合格的程序员,要学会淡定!看看警告和错误的大 ...
- shell 调用 sqlplus
一.最简单的shell里调用sqlplus. $ vi test1.sh #!/bin/bashsqlplus -S /nolog > result.log <<EOFset hea ...
- SQL SERVER 补丁查看
SELECT @@VERSION as 版本情况 SELECT SERVERPROPERTY('ProductVersion') as 产品版本编号, SERVERPROPERTY('Produc ...
- Java继承是复制还是共用?答案共用
继承是复制还是共用?例如 Dog类继承Animal类,在Dog中的属性修改,Animal中的属性也会一起改变吗?如果用Dog和Animal分别实例化对象,dog和animal,这两者的属性是公用还是各 ...
- 响应头里的"Last-Modified"值是怎么来的?
1.如图所示,app.js文件得到的响应头的"Last-Modified"数值是:Mon, 09 Sep 2013 09:18:22 GMT 我们查看服务器上的app.js文件的修 ...