<!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. for循环嵌套

    今天复习了分支语句以及for循环,新内容主要讲解了for循环的嵌套: 外循环控制行,内循环控制列 下面几个实例: 五行五列的矩阵 左下角是直角的三角形: 左上角是直角的三角形: 右上角为直角的三角形: ...

  2. mob免费短信验证码安卓SDK调用方法

    很不错的一款免费验证码平台,支持IOS.安卓,比那些收费的稳定.开发容易.分享给大家,希望大家不要滥用 官网: http://mob.com/ 官方有开发文档,但是有几点要注意的官方没有提到,导致初始 ...

  3. js 获取系统当前时间

    JS获取当前的日期和时间的方法:var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年 ...

  4. Codeforces Round #375 (Div. 2) - C

    题目链接:http://codeforces.com/contest/723/problem/C 题意:给定长度为n的一个序列.还有一个m.现在可以改变序列的一些数.使得序列里面数字[1,m]出现次数 ...

  5. poj 2774 Long Long Message 后缀数组基础题

    Time Limit: 4000MS   Memory Limit: 131072K Total Submissions: 24756   Accepted: 10130 Case Time Limi ...

  6. js与jquery异同

    大家都知道jquery是js的一个库,很多东西大多数简写了,让js写起来特别的方便.但是对与学习的人来说,最好是先学会了js再去学jquery会更好.在学得过程中你会发现两者实现的原理是差不多的,但是 ...

  7. JavaOne_2016演讲视频：

    http://list.youku.com/albumlist/show?id=28553407&qq-pf-to=pcqq.group

  8. kafka 集群安装与安装测试

    一.集群安装 1. Kafka下载:wget https://archive.apache.org/dist/kafka/0.8.1/kafka_2.9.2-0.8.1.tgz 解压 tar zxvf ...

  9. Python学习笔记10

      1.函数式编程   理论就来自lambda演算,虽然没有学过lisp,一直被其大名震撼. 特性: 函数是以一等公民 可以作为参数 可以作为返回值 具有闭包特性   1.1参数传递方式 一般参数传递 ...

  10. Codeforces 682D Alyona and Strings（DP）

    题目大概说给两个字符串s和t,然后要求一个包含k个字符串的序列,而这个序列是两个字符串的公共子序列,问这个序列包含的字符串的总长最多是多少. 如果用DP解,考虑到问题的规模,自然这么表示状态: dp[ ...