<!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. oc中定时器的基本使用

    // 时间间隔 调用的对象  调用的方法 用户信息 是否循环 [NSTimer scheduledTimerWithTimeInterval: target:self selector:@select ...

  2. CE搜索内存数据的原理

      最近发现有朋友在玩游戏时, 使用一款工具来修改游戏的部分数据,作弊的效果, 也就是CE(Cheat Engine),这款工具是 delphi 编写的, 于是好奇, 然后瞬间想到API OpenPr ...

  3. 【JDBC 报错】Connections could not be acquired from the underlying database!

    项目启动报错: [2016-07-13 10:04:15,074] ERROR org.apache.ibatis.executor.BaseExecutor Could not get a data ...

  4. 最值得学习的10个C语言开源项目

    最好别下载最新版,因为代码量比较大,可以下载很早的版本 搜索词:开源 C Webbench Webbench是一个在linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我 ...

  5. Codeforces Round #355 (Div. 2)-B

    B. Vanya and Food Processor 题目链接:http://codeforces.com/contest/677/problem/B Vanya smashes potato in ...

  6. nodejs随记01

    EventEmitter var stream = require('stream'); var Readable = stream.Readable; //写入类(http-req就是),初始化时会 ...

  7. VS2013单元测试及代码覆盖率分析--Xunit

    1,Javaweb中有jmeter.jacoco.ant.badboy等集成测试代码覆盖率的方式,C#代码的覆盖率怎么测试呢?VS2013的IDE上本身并未集成测试的工具,以下讲解VS2013中C#代 ...

  8. Lost Cows

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9669   Accepted: 6228 Description N (2 ...

  9. Hash(LCP) || 后缀数组 LA 4513 Stammering Aliens

    题目传送门 题意:训练指南P225 分析:二分寻找长度,用hash值来比较长度为L的字串是否相等. #include <bits/stdc++.h> using namespace std ...

  10. BFS(八数码) POJ 1077 || HDOJ 1043 Eight

    题目传送门1 2 题意:从无序到有序移动的方案,即最后成1 2 3 4 5 6 7 8 0 分析:八数码经典问题.POJ是一次,HDOJ是多次.因为康托展开还不会,也写不了什么,HDOJ需要从最后的状 ...