<!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. eclipse文本域内只能输入繁体中文

    背景:在文本编辑器下写纯文本时不知怎么回事儿,原来能输入简体字,但过了之后只能输入繁体中文了!我用的是sogou拼音输入法,我检查过,输入法设置的是简体中文,eclipse默认的编码方式是utf-8. ...

  2. Servlet域对象ServletContext小应用------计算网站访问量

    package cn.yzu; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.Servlet ...

  3. spring配置的相关文章

    1.maven项目中自动下载jar包的pom.xml配置 http://blog.sina.com.cn/s/blog_643634b80101hd3i.html 2.参考配置1:http://www ...

  4. Git的安装与使用

    1,下载git https://code.google.com/p/msysgit/downloads/list 2,安装git ,我们选择命令行形式,这样无论在window下还是在linux下 都可 ...

  5. C语言连接SQLSERVER数据库

    第一步:配置ODBC.在配置ODBC时有用户DSN.系统DSN.和文件DSN三种方法,为了稳妥起见,采用系统DSN. DSN的名字叫LocalServer,帐号:sa,密码123456 第二步:打开V ...

  6. HDU 3374 最小/大表示法+KMP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3374 题意:给定一个串s,该串有strlen(s)个循环同构串,要求输出字典序最小的同构串的下标,字典 ...

  7. http://zhidao.baidu.com/link?url=X7IUn1KtjVb0889-lR1OlNOl5xJaA49LEqPHvjTvfKJt5uXPsyi-sn-Xc-yw6-fbaIBvuF0MiTVZGpZGeoW_HLphIR5WmiMVDMoNBFAOINa

    http://zhidao.baidu.com/link?url=X7IUn1KtjVb0889-lR1OlNOl5xJaA49LEqPHvjTvfKJt5uXPsyi-sn-Xc-yw6-fbaIB ...

  8. MFC listcontrol 分列 添加行数据 点击列头排序

    适用于 对话框程序 1.在工具箱中拖出 ListControl,然后右键-属性,view-Report 让你的ListControl变成这幅模样! 2.添加ListControl控件的control类 ...

  9. poj2109

    刚开始看着道题时,感觉不用高精度好像就没法做,想了半天然后果断去看依然博客(这样确实不好),发现又用到了double(这个可以放“+” “-” 300多位的家伙!!!) #include <io ...

  10. ural 2063. Black and White

    2063. Black and White Time limit: 1.0 secondMemory limit: 64 MB Let’s play a game. You are given a r ...