<!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. 15 个 Android 通用流行框架大全

      1. 缓存 名称 描述 DiskLruCache Java实现基于LRU的磁盘缓存 2.图片加载 名称 描述 Android Universal Image Loader 一个强大的加载,缓存,展 ...

  2. input上下居中问题

    IE:不管该行有没有文字,光标高度与font-size一致.FF:该行有文字时,光标高度与font-size一致.该行无文字时,光标高度与input的height一致.Chrome:该行无文字时,光标 ...

  3. 封装用className选元素

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. 开发Portlet第三步：如何在Crystal Portlet中调用远程服务？

    当基于测试数据的Portlet调试完成后,接下来就是引入远程服务,替换测试数据. (此处以Dubbo框架远程服务为例) 分步指南 删除测试数据依赖:在pom.xml文件中,删除对****-servic ...

  5. Asp.Net Mvc 控制器与视图的数据传递

    数据传递也就是控制器和视图之间的交互,比如在视图中提交的数据,在控制器怎么获取,或者控制器从业务层获得一些数据,怎么传递到视图中,让视图显示在客户端呢?带着这些疑问,我们接着看..        下面 ...

  6. td 的colspan属性

    看来要长长记性了,这个问题上次遇到过这次又犯了这个错. <table> <tr> <td colspan="10"> </td> & ...

  7. 廖雪峰js教程笔记11 操作DOM(包含作业)

    由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM. 始终记住DOM是一个树形结构.操作一个DOM节点实际上就是这么几个操作: 更新:更新 ...

  8. CSS3-html，样式与样式表的创建，选择器

  9. poj1222 EXTENDED LIGHTS OUT 高斯消元||枚举

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 8481   Accepted: 5479 Description In an ...

  10. 静态成员函数（面向对象的static关键字）

    静态成员函数 与静态数据成员一样,我们也可以创建一个静态成员函数,它为类的全部服务而不是某一个类的具体对象服务.静态成员函数与静态数据成员一样,都是类的内部实现,属于类定义的一部分.普通的成员函数一般 ...