JavaScript中getBoundingClientRect()方法详解
获取浏览器滚动的高度:
scrollTop=document.documentElement.scrollTop || document.body.scrollTop
getBoundingClientRect()
这个方法返回一个矩形对象,包含四个属性:left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。
var box=document.getElementById('box'); // 获取元素
alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离
alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离
alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离
alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离
注意:IE、Firefox3+、Opera9.5、Chrome、Safari支持,在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素,我们需要做个兼容。
document.documentElement.clientTop; // 非IE为0,IE为2
document.documentElement.clientLeft; // 非IE为0,IE为2
functiongGetRect (element) {
var rect = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left= document.documentElement.clientLeft;
return{
top : rect.top - top,
bottom : rect.bottom - top,
left : rect.left - left,
right : rect.right - left
}
}
分别加上外边据、内边距、边框和滚动条,用于测试所有浏览器是否一致。
JavaScript中getBoundingClientRect()方法详解的更多相关文章
- JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解
二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...
- 【JavaScript中的this详解】
前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的 ...
- JavaScript中的this详解
前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的 ...
- angularJS中$apply()方法详解
这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下 对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的 ...
- Javascript中prototype属性详解 (存)
Javascript中prototype属性详解 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...
- (转)javascript中event对象详解
原文:http://jiajiale.iteye.com/blog/195906 javascript中event对象详解 博客分类: javaScript JavaScriptCS ...
- jQuery中 $.ajax()方法详解
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...
- JavaScript 中 this 的详解
this 的指向 this 是 js 中定义的关键字,它自动定义于每一个函数域内,但是它的指向却让人很迷惑.在实际应用中,this 的指向大致可以分为以下四种情况. 原文作者:林鑫,作者博客:http ...
- javascript中的操作符详解1
好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...
随机推荐
- URLEncoder.encode 和 URLDecoder.decode 处理url的特殊参数
在使用 url 的 queryString 传递参数时,因为参数的值,被DES加密了,而加密得到的是 Base64的编码字符串,类似于: za4T8MHB/6mhmYgXB7IntyyOUL7Cl++ ...
- 启动mysql时显示:/tmp/mysql.sock 不存在的解决方法
启动mysql时显示:/tmp/mysql.sock 不存在的解决方法 启动mysql时报错的解决(mysql 5.0.45 redhat as 43) ====================== ...
- OAF通过Iterator标准遍历各行
这两天本人接到客户反映的bug:oaf的采购订单页面,在添加超过10行提交后,会出现空指针异常.原来,oaf的默认显示行数为10行,超过10行,页面会分页.报空指针异常,就是因为没有取到分页的行.之前 ...
- android 遇到问题未处理
在gridview 全屏,然后上面增加一个悬浮按钮,这样的布局如何设置 问题点,用相对布局,在代码寻找gridview的id时就报错了
- mysql 一些命令
show processlist; 查看服务进程列表show engines; 所有提供的引擎show variables like '%storage_engine%'; 当前默认的存储引擎show ...
- java md5
需求是,上传文件到HDFS,然后生成同名的MD5文件,基本示例如下: public static String getMD5(InputStream inputStream) { byte[] buf ...
- WPF系列 Path表示语法详解(Path之Data属性语法)
示例: XAML(代码A): <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ...
- BZOJ 2330: [SCOI2011]糖果 [差分约束系统] 【学习笔记】
2330: [SCOI2011]糖果 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 5395 Solved: 1750[Submit][Status ...
- POJ2505 A multiplication game[博弈论]
A multiplication game Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 6028 Accepted: ...
- 从数据库导出到excel
在项目 扬中 News shenbaocreateall //选中的id string cc = Request["IDcheck"]; Response.C ...