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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

<style>

*{margin:0;padding:0;}

html{margin:10px;}

#btn{

    position:absolute;

    top: 100px;

    left: 200px;

    margin-left: 20px;

    margin-top: 20px;

    border: 3px solid #f00;

}

</style>

</head>

<body>

<div style="height:2000px;"></div>

<div style="position:relative;">

    <div id="btn"></div>

</div>

<script>

var offset = document.getElementById("btn").getBoundingClientRect();

alert(offset.top);

// alert(offset.left);

alert(getAbsolutePosition(document.getElementById("btn")).top)

//console.log(offset);

function getAbsolutePosition(obj){

    var left = 0;

    var top = 0;

    while(obj){

        left += obj.offsetLeft;

        top += obj.offsetTop;

        obj = obj.offsetParent;

    }

    return {left:left, top:top};

}

</script>

</body>

</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. vmware10中开启Intel VT-x

    记得刚接触linux的时候,是在win7下使用vmware虚拟机来安装linux,这样就可以方便的一边使用win7娱乐,一边在linux下进行学习.后来发现这种方式使得win7很卡,虚拟机也很卡,让人 ...

  2. 【数据结构与算法分析——C语言描述】第一章总结 引论

    这一章主要复习了一些数学知识,像指数.对数.模运算.级数公式:还有2种证明方法,归纳假设法和反证法.所幸以前学过,重新拾捡起来也比较轻松. 简要地复习了递归,提出了编写递归例程的四条基本法则: 基准情 ...

  3. 使用MockMvc测试Spring mvc Controller

    概述   对模块进行集成测试时,希望能够通过输入URL对Controller进行测试,如果通过启动服务器,建立http client进行测试,这样会使得测试变得很麻烦,比如,启动速度慢,测试验证不方便 ...

  4. 代理模式(proxy)

    1.代理模式 代理模式的作用是:为其他对象提供一种代理以控制对这个对象的访问. 在某些情况下,一个客户不想或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用. 代理模式一般 ...

  5. 桶排序-C-结构体排序

    struct TS { int index; ]; }; ] = {{,,,,,"s8"}}; ]; int i; int length = sizeof(a) / sizeof ...

  6. 桶排序-OC

    NSArray * b = @[@,@,@,@,@]; NSMutableArray *a = @[].mutableCopy; ; i<; i++) { a[i] = @; } for (NS ...

  7. （phpmyadmin error）Login without a password is forbidden by configuration (see AllowNoPassword) in ubuntu

    1.Go to /etc/phpmyadmin/config.inc.php and open it your favorite editor. 2.Search for below line of ...

  8. cocos2d-js取不到cocostudio里面控件问题

    var winSize = cc.director.getWinSize(); //add main node var mainNode = cc.Node.create(); ; mainNode. ...

  9. 转自 处理老版PIL 到 pillow

    帮新同事部署开发环境, 由于项目代码里用到了PIL库处理图片, 导致一些图片在浏览器中无法正常显示.  几番折腾, 解决了问题, 这里记录一下报的问题, 及解决方法: 1. python版本不对, 6 ...

  10. ntpd和ntpdate

    以无GUI 的Ubuntu 为例 1. ntpdate ntpdate是Ubuntu发行版的标配.按Ubuntu14.04的官方文档(这里),Ubuntu在启动时,会调用ntpdate,根据Ubunt ...