<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

*{ margin:0; padding:0}

div {padding: 40px 50px;}

#div1 {background: red;position: relative;}

#div2 {background: green; position: relative;}

#div3 {background: orange; position: relative;}

</style>

<script>

window.onload = function() {

    var oDiv3 = document.getElementById('div3');

    var iTop = 0;//初始化

    var obj = oDiv3;//默认为oDiv3

    while (obj) {

        iTop += obj.offsetTop;//offsetTop累加在变化

        obj = obj.offsetParent;//父级也在变

        //alert(obj + ' : ' + obj.id); //弹出父级

        //alert( obj.id + ' : ' + obj.offsetTop );//弹出父级及offsetTop 的值

    }

    alert( iTop );//弹出80*{ margin:0; padding:0} 初始化了的结果  若不写初始化边距为0的情况下 在火狐谷歌360ie8以上弹出88 默认边距8px 在ie7弹出95默认边距15

}

</script>

</head>

<body id="body1">

    <div id="div1">

        <div id="div2">

            <div id="div3"></div>

        </div>

    </div>

</body>

</html>

getPos,offsetTop的更多相关文章

  1. getPos封装

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 1.offsetParent,offsetLeft,offsetTop

    offsetParent <!doctype html> <html> <head> <meta charset="utf-8"> ...

  3. 通过一个实例理解 offsetLeft，offsetTop; offsetWidth , offsetHeight

    obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型 obj.offsetLeft 指 obj 相对于版面或由 offsetParen ...

  4. 盒子 offsetLeft、offsetTop、offsetWidth、getBoundingClientRect等属性解释

    offsetLeft 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将 ...

  5. offsetTop、clientTop、scrollTop、offsetTop属性

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

  6. 页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe

    1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 代码如下: <div style=" position:absolute; widt ...

  7. 关于offsetWidth,offsetHeight,offsetTop,offsetLeft和二维数组的声明

    offsetWidth,offsetHeight,offsetTop,offsetLeft 为只读状态,返回的值是int形式 只读形式即不能通过修改其值的大小. 想要修改某元素的这些值的大小(widt ...

  8. html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

    例如:$('window').scrollTop()获取的就是当前这个页面超出窗口最上端的高度,scrollLeft与此同理 scrollHeight: 获取对象的滚动高度. scrollLeft:该 ...

  9. js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版【转】

    之前在修改IE6下的一个显示bug时,查到过这些,贴这备忘,后面给出了详细说明,以前的版本,没仔细的说明,特希望大家也收藏下.   网页可见区域宽: document.body.clientWidth ...

随机推荐

  1. vc++ 加载,卸载自己的驱动程序

    用vc++加载自己的驱动程序主要分为以下几个步骤: 1.加载驱动服务 主要要用到以下几个函数 SC_HANDLE WINAPI OpenSCManagerA( __in_opt        LPCS ...

  2. 【T_SQL】 基础 续+++

    十五.T-SQL 编程 1.变量 (1)局部变量                    A.局部变量必须以标记@作为前缀 ,如@age.                    B.局部变量的使用也是先 ...

  3. SQLServer 维护脚本分享（10）索引

    --可添加索引的字段 migs.user_seeks,migs.avg_total_user_cost,migs.avg_user_impact,migs.last_user_seek ,mid.st ...

  4. 删除表数据drop、truncate和delete的用法

    说到删除表数据的关键字,大家记得最多的可能就是delete了 然而我们做数据库开发,读取数据库数据.对另外的两兄弟用得就比较少了 现在来介绍另外两个兄弟,都是删除表数据的,其实也是很容易理解的 老大- ...

  5. SpringMVC解析4-DispatcherServlet逻辑脉络

    HttpServlet提供了不同的服务方法,它们是doDelete(),doGet(),doOptions(),doPost(),doPut(),和doTrace(),它会根据不同的请求形式将程序引导 ...

  6. BZOJ 3542 [Poi2014]Couriers ——可持久化线段树

    [题目分析] 查找区间内出现次数大于一半的数字. 直接用主席树,线段树上维护区间大小,由于要求出现次数大于一半,每到一个节点可以分治下去. 时间复杂度(N+Q)logN [代码] #include & ...

  7. Redis Tools

    1. Resources Redis Desktop Manager http://redisdesktop.com/ Redis命令的中文文档 http://redisdoc.com/ Redis安 ...

  8. OpenCV 线性混合（4）

      带滚动条的线性混合示例:   #include "stdafx.h" #include<iostream> #include<thread> #incl ...

  9. Java 语言细节

    1.  if(x = 1) 为什么java不会因为这样的笔误代码犯错?  // meant x == 1 因为在C++中,整数0代表布尔值false,非0值相当于布尔值true,在Java中int与布 ...

  10. 笔记本做wifi热点

    你可以开启windows 7的隐藏功能:虚拟WiFi和SoftAP(即虚拟无线AP),就可以让电脑变成无线路由器,实现共享上网.点开始 所有程序 命令提示符右键管理员身份运行命令提示符 运行命令:ne ...