获取浏览器滚动的高度:

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()方法详解的更多相关文章

  1. JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  2. 【JavaScript中的this详解】

    前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的 ...

  3. JavaScript中的this详解

    前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的 ...

  4. angularJS中$apply()方法详解

    这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下   对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的 ...

  5. Javascript中prototype属性详解 (存)

    Javascript中prototype属性详解   在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...

  6. (转)javascript中event对象详解

    原文:http://jiajiale.iteye.com/blog/195906 javascript中event对象详解          博客分类: javaScript JavaScriptCS ...

  7. jQuery中 $.ajax()方法详解

    $.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...

  8. JavaScript 中 this 的详解

    this 的指向 this 是 js 中定义的关键字,它自动定义于每一个函数域内,但是它的指向却让人很迷惑.在实际应用中,this 的指向大致可以分为以下四种情况. 原文作者:林鑫,作者博客:http ...

  9. javascript中的操作符详解1

    好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...

随机推荐

  1. URLEncoder.encode 和 URLDecoder.decode 处理url的特殊参数

    在使用 url 的 queryString 传递参数时,因为参数的值,被DES加密了,而加密得到的是 Base64的编码字符串,类似于: za4T8MHB/6mhmYgXB7IntyyOUL7Cl++ ...

  2. 启动mysql时显示:/tmp/mysql.sock 不存在的解决方法

    启动mysql时显示:/tmp/mysql.sock 不存在的解决方法 启动mysql时报错的解决(mysql 5.0.45 redhat as 43)  ====================== ...

  3. OAF通过Iterator标准遍历各行

    这两天本人接到客户反映的bug:oaf的采购订单页面,在添加超过10行提交后,会出现空指针异常.原来,oaf的默认显示行数为10行,超过10行,页面会分页.报空指针异常,就是因为没有取到分页的行.之前 ...

  4. android 遇到问题未处理

    在gridview 全屏,然后上面增加一个悬浮按钮,这样的布局如何设置 问题点,用相对布局,在代码寻找gridview的id时就报错了

  5. mysql 一些命令

    show processlist; 查看服务进程列表show engines; 所有提供的引擎show variables like '%storage_engine%'; 当前默认的存储引擎show ...

  6. java md5

    需求是,上传文件到HDFS,然后生成同名的MD5文件,基本示例如下: public static String getMD5(InputStream inputStream) { byte[] buf ...

  7. WPF系列 Path表示语法详解(Path之Data属性语法)

    示例: XAML(代码A): <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ...

  8. BZOJ 2330: [SCOI2011]糖果 [差分约束系统] 【学习笔记】

    2330: [SCOI2011]糖果 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 5395  Solved: 1750[Submit][Status ...

  9. POJ2505 A multiplication game[博弈论]

    A multiplication game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6028   Accepted:  ...

  10. 从数据库导出到excel

    在项目 扬中 News shenbaocreateall //选中的id string cc = Request["IDcheck"];            Response.C ...