最近写组件，这两个属性的结果搞的有点晕，我检查的文件及资料，这两个性质如下面总结：

他一直在offsetLeft。offsetTop，scrollLeft。scrollTop这些方法都是非常迷茫，花一天的时间学习好．将得到的结果如下：
1.offsetTop     :
当前对象到其上级层顶部的距离.
不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.

2.offsetLeft    :
当前对象到其上级层左边的距离.
不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.

3.offsetWidth   :
当前对象的宽度.
与style.width属性的差别在于:如对象的宽度设定值为百分比宽度,则不管页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值

4.offsetHeight :
与style.height属性的差别在于:如对象的宽度设定值为百分比高度,则不管页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值

5.offsetParent  :
当前对象的上级层对象.
注意.假设对象是包含在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题.
利用这个属性，能够得到当前对象在不同大小的页面中的绝对位置．

得到绝对位置脚本代码
 1function GetPosition(obj)
 2;
 5
 6    while(obj != document.body)
 7    }

6.scrollLeft    :
对象的最左边到对象在当前窗体显示的范围内的左边的距离．
即是在出现了横向滚动栏的情况下，滚动栏拉动的距离．

7.scrollTop
对象的最顶部到对象在当前窗体显示的范围内的顶边的距离．
即是在出现了纵向滚动栏的情况下，滚动栏拉动的距离．

8.測试offsetTop和scrollTop的html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
 function test(){
  var oIframe = document.getElementById("div1");
  alert(oIframe.offsetTop);
  alert(oIframe.scrollTop);
 }
  //-->
  </SCRIPT>
 </HEAD>

<BODY style="border:1px red solid;padding:20px;margin:0px;">
 <div id="div1" style="border:1px blue solid;height:400px;width:200px;overflow:auto">
 <iframe id="iframe1" src="http://www.baidu.com" width="400" height="500" style="border:1px red solid;" scrolling="no">
 </iframe>
 </div>
 <input type="button" value="OK" onclick="test()"/>
 </BODY>
</HTML>
<script type="text/javascript" ></script>

offsetTop和scrollTop差异的更多相关文章

  1. offsetTop和scrollTop的差别

    近期想写个组件,结果被这两个属性搞的有点晕,查了下文档和资料,对这两个属性总结例如以下: 一直以来对offsetLeft,offsetTop,scrollLeft,scrollTop这几个方法非常迷糊 ...

  2. 图片滚动（UP）的JS代码详解（offsetTop、scrollTop、offsetHeigh）【转】

    源地址 信息技术教材配套的光盘里有一段设置图片滚动的JS代码,与网络上差不多,实现思路:一个设定高度并且隐藏超出它高度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,dem ...

  3. jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...

  4. offsetTop/offsetHeight scrollTop/scrollHeight 的区别

    offsetTop/offsetHeight   scrollTop/scrollHeight  这几个属性困扰了我N久,这次一定要搞定. 假设 obj 为某个 HTML 控件. obj.offset ...

  5. clientTop、offsetTop和scrollTop的区分

    页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offse ...

  6. 搞懂offsetY、offsetTop、scrollTop、offsetHeight、scrollHeight

    先搞offsetTop,最难懂的就是它了 官方解释:返回当前元素的上边界到它的包含元素的上边界的偏移量,以像素为单位.这真TM坑爹啊!有木有!经过仔细研究查找得出结论:offsetTop是相对于离它最 ...

  7. clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    clientHeight:包括padding但不包括border.水平滚动条.margin的元素的高度.对于inline的元素这个属性一直是0,单位px,只读元素. offsetHeight:包括pa ...

  8. 搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度.滚动.位置相关的属性,单凭单词很难搞清楚分 ...

  9. 关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究

    我是以chrome浏览器做的研究. 先看一段代码: <script> window.addEventListener('DOMContentLoaded',function(){ var ...

随机推荐

  1. 文件下载:"Content-disposition","attachment; filename=中文名>>>解决方案

    文件下载时常会出现如下问题: response.setHeader("Content-disposition","attachment; filename="+ ...

  2. Tomcat在Linux上安装

    1. 下载并 安装 tomcat wget  http://mirror.bit.edu.cn/apache/tomcat/tomcat-8/v8.0.14/bin/apache-tomcat-8.0 ...

  3. c++map按value排序--将map的pair对保存到vector中，然后写比较仿函数+sort完成排序过程。

    map是用来存放<key, value>键值对的数据结构,可以很方便快速的根据key查到相应的value.假如存储学生和其成绩(假定不存在重名,当然可以对重名加以区分),我们用map来进行 ...

  4. iBeacon怎样工作

    原文地址 iBeacons iBeacons近期是一个趋势的话题,它们同意室内定位,让你的电话知道你在基站的范围.这个能有很多应用:在停车场帮你找到你的车,零售商通过优惠券和基于位置的特别优惠,以至很 ...

  5. php反射类 ReflectionClass

    什么是php反射类,顾名思义,能够理解为一个类的映射.举个样例: class fuc {        //定义一个类static function ec() {echo '我是一个类';}}$cla ...

  6. 2014年辛星解读Javascript之用DOM动态操纵HTML元�

    关于DOM,我们了解了能够用DOM操纵HTML的一些属性和样式,还能够为HTML元素绑定事件等等,那么接下来,我们将涉及到用DOM来动态的创建.删除HTML等一些操作,我的核心思路还是重实战,因此,代 ...

  7. “简密”App Store处女作开发总结

    前言 今天是我的iOS App Store上架应用处女作"简密"第一天上线的日子,简密是我从事iOS开发三年以来的第一款个人上架应用,之前做过两年的企业级应用开发以及公司的电商应用 ...

  8. linux中怎样设置DHCP

    linux怎样设置DHCP 环境:RH linux 9.0 使用linux下经常使用的dhcpd包. 最新版本号 dhcp3.0.5 下载地址: 下载 1.安装: 先拷贝dhcp-3.0.5.tar. ...

  9. cocos2d-x 旅程開始--（实现瓦片地图中的碰撞检測）

    转眼隔了一天了,昨天搞了整整一下午加一晚上,楞是没搞定小坦克跟砖头的碰撞检測,带着个问题睡觉甚是难受啊!还好今天弄成功了.只是感觉程序不怎么稳定啊.并且发现自己写的东西让我重写一遍的话我肯定写不出来. ...

  10. [置顶] 生成学习算法、高斯判别分析、朴素贝叶斯、Laplace平滑——斯坦福ML公开课笔记5

    转载请注明:http://blog.csdn.net/xinzhangyanxiang/article/details/9285001 该系列笔记1-5pdf下载请猛击这里. 本篇博客为斯坦福ML公开 ...