offsetTop和scrollTop差异
2015-06-11 18:15
344 查看
最近写组件,这两个属性的结果搞的有点晕,我检查的文件及资料,这两个性质如下面总结:
他一直在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{
3 var left = 0;
4 var top = 0;
5
6 while(obj != document.body)
7 {
8 left = obj.offsetLeft;
9 top = obj.offsetTop;
obj = obj.offsetParent;
}
alert("Left Is : " + left + "/r/n" + "Top Is : " + top);
}
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>
他一直在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{
3 var left = 0;
4 var top = 0;
5
6 while(obj != document.body)
7 {
8 left = obj.offsetLeft;
9 top = obj.offsetTop;
obj = obj.offsetParent;
}
alert("Left Is : " + left + "/r/n" + "Top Is : " + top);
}
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>
相关文章推荐
- Linux下的Nano命令
- 【待续】Centos7安装完后无法进入图形界面(GNOME/KDE)的解决方
- Linux如何查看CPU温度
- easy_install jinja2 mac linux
- 走进Linux01-磁盘分区与目录结构
- Zookeeper架构学习(四):ZAB协议
- 使用mutt发送邮件
- Linux 一些命令记录
- Nodejs RESTFul架构实践
- 在Linux下用 eric4+python+pyqt 编写一个多窗口程序
- linux 安装 apr
- Eclipse开发tomcat 常用配置
- smartsvn 8.6.6 for linux 的安装与破解
- Linux GCC升级4.8.2 支持C++11 (CentOS)
- Linux命令详解之一文件操作
- Linux初步——常用简单命令
- setsockopt
- 1个Makefile简单例子
- free -m 详解
- 时间服务器(Linux ntp)