offsetTop和scrollTop的差别
近期想写个组件，结果被这两个属性搞的有点晕，查了下文档和资料，对这两个属性总结例如以下：
一直以来对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的差别相关推荐
- offsetTop和scrollTop的区别
最近想写个组件,结果被这两个属性搞的有点晕,查了下文档和资料,对这两个属性总结如下: 一直以来对offsetLeft,offsetTop,scrollLeft,scrollTop这几个方法很迷糊,花了 ...
- 【JS与JQ】原生JS(clientTop/clientLeft,offsetTop/offsetLeft,scrollTop/scrollLeft)
JS和JQuery位置方法汇总 前言总结: HTML: <div class="gFather"><div class="father"> ...
- cleintHeight、offsetHeight、scrollHeight、cleintTop、offsetTop、scrollTop、getClientRects、getBoundingClien
项目 Value cleintHeight 元素高度(不包括border) offsetHeight 元素高度(包括border) scrollHeight 元素内容高度(没有滚动的情况下,值等于cl ...
- offsetTop和scrollTop区别
offsetTop:当前元素顶端距离父元素顶端距离,鼠标滚轮不会影响其数值. scrollTop:当前元素顶端距离窗口顶端距离,鼠标滚轮会影响其数值. 如图所示中间是个div,那么div.offset ...
- 对offsetLet,offsetTop,scrollLeft,scrollTop几个方法的理解
一直以来对offsetLeft,offsetTop,scrollLeft,scrollTop这几个方法很迷糊,花了一天的时间好好的学习了一下．得出了以下的结果: 1.offsetTop : 当 ...
- 关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究
我是以chrome浏览器做的研究. 先看一段代码: <script>window.addEventListener('DOMContentLoaded',function(){var no ...
- 花点时间记住scrollTop、clientHeight、offsetTop、scrollHeight
一.经典图解读 先放上一张经典图 看不懂,没关系!接下来耐心看完必然有不一样的收获. 我们常遇到的是实际是这么几个属性: offsetTop clientHeight scrollTop scroll ...
- 利用scrollTop 制作图片无缝滚动
<!doctype html> <title>javascript无缝滚动 by 司徒正美</title> <meta charset="utf-8 ...
- $(document).scrollTop()与$(window).scrollTop()
$(document).scrollTop() 获取垂直滚动的距离 即当前滚动的地方的窗口顶端到整个页面顶端的距离 要获取顶端 只需要获取到scrollTop()==0的时候 就是顶端了 要获取底端 ...
最新文章
- [转载]Linux 线程实现机制分析
- CVPR 2021 | 基于帧场学习的多边形建筑提取
- eclipse新建一个java_Eclipse中新建一个java源文件的步骤
- hdu1074 状态压缩dp+记录方案
- c语言二极管控制程序,二极管(STC89C52): 编写程序控制二极管花样流水灯
- python numpy安装教程_手把手教你搭建机器学习开发环境—Python与NumPy的超简安装教程...
- [Android Pro] 终极组件化框架项目方案详解
- java面试题40 当编译并运行下面程序时会发生什么结果（）
- 如何让nRF52840 dongle化身为BLE sniffier (过程详细记录)
- 【英语学习】【WOTD】abecedarian 释义/词源/示例
- Java中的回调机制，这篇给你整的明明白白的
- android学习笔记---59_各种图形的使用介绍,android炫酷效果的实现
- Git SSL公钥密钥生成
- Python爆力破解rar密码并对比多线程的效率
- Twaver-HTML5基础学习(12)连线(Link)
- word的参考文献的doi号怎么进行换行
- 列主元Guass消去法
- 服务器应该选哪家好？
- 以计算机网络为中介的人际传播,人际传播在传媒中的运用
- html js 跑马灯效果,Javascript实现跑马灯效果的简单实例