获取div相对文档的位置,两个方法

经测试 document.getElementById("btn").getBoundingClientRect() 在IE6下有2像素的bug,不知道为什么.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. <style>
  7. *{margin:0;padding:0;}
  8. html{margin:10px;}
  9. #btn{
  10.     position:absolute;
  11.     top: 100px;
  12.     left: 200px;
  13.     margin-left: 20px;
  14.     margin-top: 20px;
  15.     border: 3px solid #f00;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div style="height:2000px;"></div>
  21. <div style="position:relative;">
  22.     <div id="btn"></div>
  23. </div>
  24. <script>
  25. var offset = document.getElementById("btn").getBoundingClientRect();
  26.  
  27. alert(offset.top);
  28. // alert(offset.left);
  29. alert(getAbsolutePosition(document.getElementById("btn")).top)
  30. //console.log(offset);
  31.  
  32. function getAbsolutePosition(obj){
  33.     var left = 0;
  34.     var top = 0;
  35.     while(obj){
  36.         left += obj.offsetLeft;
  37.         top += obj.offsetTop;
  38.         obj = obj.offsetParent;
  39.     }
  40.     return {left:left, top:top};
  41. }
  42. </script>
  43. </body>
  44. </html>

获取div相对文档的位置的更多相关文章

  1. jquery获取元素在文档中的位置信息以及滚动条位置（转）

    jquery获取元素在文档中的位置信息以及滚动条位置 http://blog.csdn.net/qq_34095777/article/details/78750886     原文链接 原创 201 ...

  2. 中高级前端应该必会，js实现事件委托代理、切换样式、元素获取相对于文档位置等

    1.介绍 随着组件开发大流行,现在三大框架已经基本占领了整个前端. 这时候,我们要是引入一个 jq 是不是先得你的项目非常臃肿,jq 也很不适合. 这个时候,你就需要来增加你 js 的功底. 2.各种 ...

  3. html中如何获取元素在文档中的位置

    html中如何获取元素在文档中的位置 一.总结 一句话总结: $("#elem").offset().top $("#elem").offset().left ...

  4. ELK学习总结（2-3）Mget获取多个文档

     mget 获取多个文档 1.curl 命令格式:mget获取多个文档: curl  'localhost:9200/_mget'  -d  '{ "docs":[ { " ...

  5. 24-[jQuery]-属性，文档，位置，筛选

    1.jquery的属性操作 jquery对象有它自己的属性和方法,我们先研究一下jquery的属性操作.jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 h ...

  6. div排版+文档流+定位秘诀

    由于没有找到自己认为完整的关于普通流.浮动和绝对定位的中文文章,于是鼓起勇气决定自己来写篇. 在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ,类型可以是 ...

  7. HTML+CSS基础 块级元素div分析 文档流 脱离文档流的方法

    块级元素div分析 1.外边距  margin 2.内边距 padding 3.边框  border Div的真实宽度=width+margin-left+margin-right+border*2+ ...

  8. JS在HTML文档引入位置

    我们今天来聊一聊关于JavaScript文件的引入位置的问题:大家在平时的Web开发中有没有想过这样一个问题,那就是我应该在文档的头部(也就是<head>标签内部里面)引入所需要的Java ...

  9. js获取div相对屏幕的坐标位置

    1:div相对屏幕的坐标位置 function getDivPosition(div){ var x = div.getBoundingClientRect().left; var y = div.g ...

随机推荐

  1. RPC基础篇

    RPC概念 RPC(Remote Procedure Call Protocol)——远程过程调用协议, 是一种进程间通信方式.它允许程序调用另一个地址空间(通常是共享网络的另一台机器上)的过程或函数 ...

  2. Embedded之Introduction

    1 Embedded system An embedded system is a combination of computer hardware and software, and perhaps ...

  3. Thu夏令营 总结

    感觉这次thu夏令营简直就是爆RP啊 竟然签了无条件本一 [Waring]RP已空 话说这次考试设定 竟然是下午两点开始考试 考到五点- - 导致中午必须午睡 宾馆里清华也不近 按原本试机安排到12点 ...

  4. Hadoop构成

    What Is Apache Hadoop? The Apache™ Hadoop® project develops open-source software for reliable, scala ...

  5. 第二百三十四天 how can I 坚持

    今天果然不负众望,下了一天的雪啊,挺好. 今天把花搞了下,都弄花盆里了,希望不会就这么挂掉.八千代,绿萝,还有小叶元宝. 中午喝了点酒,没感觉. 过两天气温就零下十多度了,该咋办啊,最怕冬天.家里现在 ...

  6. Cisco ASA5500系列防火墙恢复IOS全过程

    擦除防火墙配置的命令是write erase而不是erase flash!当ASA5510的flash被erase后,如何将新的IOS拷贝到5510内呢? 如下:1. 当flash被erase后设备会 ...

  7. oracle学习 六 删除表空间，数据文件的语句以及导入导出dmp文件的方法（持续更新中）

    要想删除表空间就要先删除数据文件 例如这个例子 CREATE TABLESPACE STHSGIMGDB_SPACE11 DATAFILE 'D:\ORACLEDATABASE\JinHuaDataB ...

  8. POJ 3616 Milking Time (排序+dp)

    题目链接:http://poj.org/problem?id=3616 有头牛产奶n小时(n<=1000000),但必须在m个时间段内取奶,给定每个时间段的起始时间和结束时间以及取奶质量 且两次 ...

  9. typedef block

    给同一种类型的block定义一个别名 typedef int (^MyBlock) (int , int); int main(int argc, const char * argv[]) { @au ...

  10. ecshop二次开发

    模板开发首页参考资料: http://book.ecmoban.com/ http://pan.baidu.com/s/1bnezFUv 自行修改ecshop读写分离设置,请查看另一篇文章,ecsho ...