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

他一直在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时则不会有问题.
利用这个属性，能够得到当前对象在不同大小的页面中的绝对位置．

得到绝对位置脚本代码1functionGetPosition(obj)2{3varleft=0;4vartop=0;56while(obj!=document.body)7{8        left=obj.offsetLeft;9        top=obj.offsetTop;1011        obj=obj.offsetParent;12    }1314    alert("Left Is :"+left+"/r/n"+"Top  Is :"+top);15}

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" οnclick="test()"/>
 </BODY>
</HTML>
<script type="text/javascript" ></script>

offsetTop和scrollTop差异相关推荐

  1. offsetTop和scrollTop的差别

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

  2. offsetTop和scrollTop的区别

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

  3. 【JS与JQ】原生JS(clientTop/clientLeft,offsetTop/offsetLeft,scrollTop/scrollLeft)

    JS和JQuery位置方法汇总 前言总结: HTML: <div class="gFather"><div class="father"> ...

  4. cleintHeight、offsetHeight、scrollHeight、cleintTop、offsetTop、scrollTop、getClientRects、getBoundingClien

    项目 Value cleintHeight 元素高度(不包括border) offsetHeight 元素高度(包括border) scrollHeight 元素内容高度(没有滚动的情况下,值等于cl ...

  5. offsetTop和scrollTop区别

    offsetTop:当前元素顶端距离父元素顶端距离,鼠标滚轮不会影响其数值. scrollTop:当前元素顶端距离窗口顶端距离,鼠标滚轮会影响其数值. 如图所示中间是个div,那么div.offset ...

  6. 对offsetLet,offsetTop,scrollLeft,scrollTop几个方法的理解

    一直以来对offsetLeft,offsetTop,scrollLeft,scrollTop这几个方法很迷糊,花了一天的时间好好的学习了一下．得出了以下的结果: 1.offsetTop     : 当 ...

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

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

  8. 花点时间记住scrollTop、clientHeight、offsetTop、scrollHeight

    一.经典图解读 先放上一张经典图 看不懂,没关系!接下来耐心看完必然有不一样的收获. 我们常遇到的是实际是这么几个属性: offsetTop clientHeight scrollTop scroll ...

  9. 利用scrollTop 制作图片无缝滚动

    <!doctype html> <title>javascript无缝滚动 by 司徒正美</title> <meta charset="utf-8 ...

  10. $(document).scrollTop()与$(window).scrollTop()

    $(document).scrollTop() 获取垂直滚动的距离 即当前滚动的地方的窗口顶端到整个页面顶端的距离 要获取顶端 只需要获取到scrollTop()==0的时候 就是顶端了 要获取底端 ...

最新文章

  1. html5小游戏Untangle
  2. 区块链项目实战 - 使用以太坊/智能合约solidity，全栈开发区块链借贷记账小应用，含完整源码
  3. ApplicationContext对象的获取方式
  4. UT斯达康XV6700上网终极设置
  5. 精准扶贫谋定产业化-农业大健康·万祥军：东平农业品牌化
  6. 计算机共享盒子,电脑之间如何共享文件
  7. 微信开发本地调试工具（模拟微信客户端）
  8. 技术或运营的妥协/退让场景
  9. PyQt4（简单界面）
  10. Mac 上有哪些值得推荐的软件？冷门小众软件但实用
  11. 中兴捧月——婚姻匹配问题
  12. 寺庙招聘爆火：月薪15000，五险一金，早九晚五，周末双休，饭菜免费！网友：想出家了......
  13. 腾讯云服务器挂载云硬盘数据盘并初始化云硬盘
  14. JGG | 中国中医科学院仝小林团队/李敏团队和长春中医药大学王泽玉团队合作综述调控肠干细胞代谢活动的关键因素...
  15. Linux/Android——usb触摸屏驱动 - usbtouchscreen (一)
  16. Chrome Performance 页面性能分析
  17. java process 乱码_Java常见乱码原理及解决方案
  18. 如何安装与卸载NAS应用程序
  19. php翻牌游戏代码,HTML5翻牌对对碰游戏源码
  20. Java计算机毕业设计德纳影城售票管理源码+系统+数据库+lw文档

热门文章

  1. linux df命令无反馈,Linux df 命令长时间没有返回
  2. Numpy快速入门教程
  3. 【2019南京ICPC网络赛 D】Robots【DAG上的随机游走】
  4. 降维系列之 LTSA 局部切空间排列
  5. 刷题记录 kuangbin带你飞专题九：连通图
  6. 240.搜索二维矩阵II（力扣leetcode） 博主可答疑该问题
  7. 62.不同的路径（力扣leetcode） 博主可答疑该问题
  8. 我的世界android制作教程,《我的世界手机版》怎么制作mod制作JS教程图文攻略
  9. multiplot 安装与配置
  10. 使用ifconfig命令来看网卡的IP，但是，输入命令之后，eht0里面只有 inet6 addr 而没有 inet addr...