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时则不会有问题.
利用这个属性,能够得到当前对象在不同大小的页面中的绝对位置.
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差异的更多相关文章
- offsetTop和scrollTop的差别
近期想写个组件,结果被这两个属性搞的有点晕,查了下文档和资料,对这两个属性总结例如以下: 一直以来对offsetLeft,offsetTop,scrollLeft,scrollTop这几个方法非常迷糊 ...
- 图片滚动(UP)的JS代码详解(offsetTop、scrollTop、offsetHeigh)【转】
源地址 信息技术教材配套的光盘里有一段设置图片滚动的JS代码,与网络上差不多,实现思路:一个设定高度并且隐藏超出它高度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,dem ...
- jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...
- offsetTop/offsetHeight scrollTop/scrollHeight 的区别
offsetTop/offsetHeight scrollTop/scrollHeight 这几个属性困扰了我N久,这次一定要搞定. 假设 obj 为某个 HTML 控件. obj.offset ...
- clientTop、offsetTop和scrollTop的区分
页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offse ...
- 搞懂offsetY、offsetTop、scrollTop、offsetHeight、scrollHeight
先搞offsetTop,最难懂的就是它了 官方解释:返回当前元素的上边界到它的包含元素的上边界的偏移量,以像素为单位.这真TM坑爹啊!有木有!经过仔细研究查找得出结论:offsetTop是相对于离它最 ...
- clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
clientHeight:包括padding但不包括border.水平滚动条.margin的元素的高度.对于inline的元素这个属性一直是0,单位px,只读元素. offsetHeight:包括pa ...
- 搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度.滚动.位置相关的属性,单凭单词很难搞清楚分 ...
- 关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究
我是以chrome浏览器做的研究. 先看一段代码: <script> window.addEventListener('DOMContentLoaded',function(){ var ...
随机推荐
- jQuery选择器实现隔行变色和使用javaScript实现隔行变色
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--什么是选择器? jQuery选择器继承了 ...
- hdu3062(two-sat)
传送门:Party 题意:有n对夫妻被邀请参加一个聚会,因为场地的问题,每对夫妻中只有1人可以列席.在2n 个人中,某些人之间有着很大的矛盾(当然夫妻之间是没有矛盾的),有矛盾的2个人是不会同时出现在 ...
- ad nbetmk57
http://www.zhihu.com/collection/24337307 http://www.zhihu.com/collection/24337259 http://www.zhihu.c ...
- LINUX专题之操作系统字符集
原创作品,出自 "深蓝的blog" 博客,欢迎转载.转载时请务必注明下面出处,否则追究版权法律责任. 深蓝的blog: http://blog.csdn.net/huangyanl ...
- Struts2第一个工程helloStruts极其基本配置
前面已经准备好了Struts-2.3.15,现在就可以直接搭建Struts2的工程了.前面http://blog.csdn.net/huangchnegdada/article/details/917 ...
- Django写的投票系统1(转)
当然主要是从django的帮助文档里面来的,权当是翻译吧 这个投票系统的主要功能有 1.一个前台页面,可以让用户来投票 2.一个管理员页面,可以用来添加.修改.删除投票 首页第一步要确定你已经安装了D ...
- Web监听器导图详解(转)
阅读目录 Web监听器 监听器的分类 Servlet版本与Tomcat版本 getAttribute与getParameter的区别 参考 监听器是JAVA Web开发中很重要的内容,其中涉及到的知识 ...
- http协议之cookie标准RFC6265介绍
[Docs] [txt|pdf] [draft-ietf-httpst...] [Diff1] [Diff2] [Errata] PROPOSED STANDARD Errata Exist In ...
- ACM/ICPM2014鞍山现场赛D Galaxy (HDU 5073)
题目链接:pid=5073">http://acm.hdu.edu.cn/showproblem.php?pid=5073 题意:给定一条线上的点,然后能够去掉当中的m个,使剩下的到重 ...
- java移位运算符具体解释
java移位运算符不外乎就这三种:<<(左移).>>(带符号右移)和>>>(无符号右移). 1. 左移运算符 左移运算符<<使指定值的全部位都左移 ...