获取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. js中ajax如何解决跨域请求

    js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...

  2. HDU-3874 Necklace 线段树+离线

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3874 比较简单的题,题意也好懂. 先O(n)求每个数左边第一次出现的与他相同的数的位置l[i].对询问 ...

  3. 轻松学习Linux之理解Shell的硬链接与软连接

     大家在学习linux的过程中常常遇到一些模糊且容易混淆的概念比如什么是硬链接和软链接,他们有什么区别?  软连接有点象windows中的快捷方式,连接和目标文件具有相同的节点,而硬连接就好象重新复制 ...

  4. mac机器下远程仓库添加完毕之后，却无法上传应有的内容。

    Permission denied (publickey). fatal: Could not read from remote repository. Please make sure you ha ...

  5. Time vs Story Points Estimation [转]

    One of the most common questions we get is whether to estimate in time or points. It seems like poin ...

  6. S3

    S3是Amazon EMR的一部分,它提供了一些Wikipedia的浏览统计数据,这些浏览数据的格式便于Spark测试.

  7. 【多线程同步案例】Race Condition引起的性能问题

    Race Condition(也叫做资源竞争),是多线程编程中比较头疼的问题.特别是Java多线程模型当中,经常会因为多个线程同时访问相同的共享数据,而造成数据的不一致性.为了解决这个问题,通常来说需 ...

  8. UDP广播问题

    http://bbs.csdn.net/topics/390218123 Broadcast Address(广播地址)是专门用于同时向网络中所有工作站进行发送的一个地址.在使用TCP/IP 协议的网 ...

  9. HDU 2544 最短路 http://acm.hdu.edu.cn/showproblem.php?pid=2544

    //代码: //方法1:Dijkstra's Algorithm #include<stdio.h> #include<math.h> #include<string.h ...

  10. HDU题目分类

    基础题: 1000.1001.1004.1005.1008.1012.1013.1014.1017.1019.1021.1028.1029.1032.1037.1040.1048.1056.1058. ...