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 ...
随机推荐
- MVC中Model和model的区别和用户
MVC中Model和model的区别,它们应该怎么用呢? 使用@model关键字可以定义一个Action里所对应的一个模型(经常可以叫他实体类). MVC的第一个字母M是Model,承载着View层和 ...
- spring JPA写法一种
第一次用,搞了半天,终于知道了大概. 基于ORM的JPA还是蛮好用的, 这次是实现一个MANGODB的日志存储和检索. PRISM用的. repository的写法: package paic.sto ...
- python 设计模式之中介模式
Mediator Pattern:中介模式 中介模式提供了一系列统一的系统接口.此模式也被认为是行为模式,因为他能选择程序处理流程. 当许多类开始在交互中产生结果时,可以选用中介模式.当软件开始组织 ...
- Struts的线程安全
Servlet/JSP技术和ASP.PHP等相比,由于其多线程运行而具有很高的执行效率.由于Servlet/JSP默认是以多线程模式执行的,所以,在编写代码时需要非常细致地考虑多线程的安全性问题.然而 ...
- 怎样设计REST中间件---中间件JSON对数据库数据的组织
怎样设计REST中间件---中间件JSON对数据库数据的组织 SQL查询语句有:select SQL非查询语句有:insert, update, delete 三种 中间件JSON对数据库数据的组织也 ...
- XCode工程内多Targets教程
作者 透明de面具 原帖地址 http://www.cocoachina.com/bbs/read.php?tid-10972-fpage-0-toread--page-1.html 相信很 ...
- EditText中输入信息的限制的方法
应用场景 在Android应用中有时需要EditText中只允许输入约定的一些字符,禁止输入其他字符.这里列举了一些可能的应用场景. 1. 场景一 在通讯录保存好友信息界面中填写好友的电话号码时,应当 ...
- 访问php程序无法解析,排查步骤
1.安装lamp后,php程序没有被解析 (1) apachectl -M 看是否加载了libphp5.so ,apachectl -M 这个命令查看动态libphp5.so的是否由apache加载 ...
- IE常见BUG总结(持续更新)
ie6~7下display:inline-block无效 解决方案:需要hack触发hasLayout 1 //IE6.7中内联元素(如span)触发layout属性后, 它的行为和标准中的 inli ...
- cocos2d-x 2.2.0 图片选中聚焦 ,图片描边 CCClippingNode 实现
效果例如以下图 左边箭头是x方向翻转的.右边箭头有旋转和缩放action. 大概实现方法:用箭头作为遮罩层,底图是一个绘制的矩形,得到一个黄色箭头背景.在用schedule尾随要聚焦箭头动作.这个 ...