近期想写个组件，结果被这两个属性搞的有点晕，查了下文档和资料，对这两个属性总结例如以下：

一直以来对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. A*算法完全理解

    注:原文出自Patrick Lester,一稿翻译为Panic.很久以前的老文章了,但我觉得真的非常的经典,想把它完善一下让以后的人能够更好的体会原作者和原翻译的精髓吧.我在此基础上修改了部分译文,更 ...

  2. 缓存你的BITMAP对象

    在app中通常最占内存.占流量的元素就是图片了,图片往往又无处不在,特别是伴随着list,GridView或者ViewPager出现,这些图片随着你的滑动操作,时而出现在你的屏幕中,时而消失在屏幕之外 ...

  3. MAC虚拟机NAT方式共享上网设置

    有部分FY需要,我写一下我的方法吧,当初安装完MAC后,无法上网,网络搜索用的是HOST-only方法,试了几次都没有成功,后来尝试NAT方法,发现很简单. 我的主机系统:win7 64位,自动获取I ...

  4. [转]VPN服务器配置详解

    借助VPN,企业外出人员可随时连到企业的VPN服务器,进而连接到企业内部网络.借助windows2003的“路由和远程访问”服务,可以实现基于软件的VPN. VPN(Virtual Private N ...

  5. STM32 USB-HID通信移植步骤

    大家可以使用压缩包中的UsbApp.exe调试本软件idVendor为:0483  idProduct为5750. 今天太晚了,明天还要上半天班,上位机软件找个时间在写一篇文章.请关注我的博客.压缩包 ...

  6. Android 依赖注入 ButterKnife 基本使用

    ButterKnife 是一个快速 Android View 注入框架,开发者是Jake Wharton,简单的来说,ButterKnife 是用注解的方式替代findViewById和setXXXL ...

  7. 【解决】国内访问github过慢

    github在国内慢的有点不能忍了,受不了了google了一下有什么方法没,还真找到一些方法. 死马当活马医,操作完之后确实速度上快了一些,但是毕竟国情所限,仍然做不到“秒开”. 主要是参考两篇博客: ...

  8. 有关ftp批量传送文件或文件夹

    以ftp 批量上传文件时 可以用 mput file1 file2 .. 但是这样没传送一个就会问是否传送下一个 ,那么可以使用prompt这个命令.这是个双向开关,执行一次是取消提示,在执行一次是打 ...

  9. c++拼接字符串效率比较（+=、append、stringstream、sprintf）

    转自:http://www.cnblogs.com/james6176/p/3222671.html c++拼接字符串效率比较(+=.append.stringstream.sprintf) 最近写的 ...

  10. HDU-4638 Group 树状数组+离线

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4638 个人认为比较不错的题目. 题意:给一个1-n的排列,询问区间[l,r]的数排序后连续区间的个数. ...