scrollTop是指某个可滚动区块向下滚动的距离,offsetTop则是元素的上边框与父元素的上边框的绝对距离。

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时则不会有问题.

利用这个属性,可以得到当前对象在不同大小的页面中的绝对位置.

6.scrollLeft    :

对象的最左边到对象在当前窗口显示的范围内的左边的距离.

即是在出现了横向滚动条的情况下,滚动条拉动的距离.

7.scrollTop

对象的最顶部到对象在当前窗口显示的范围内的顶边的距离.

即是在出现了纵向滚动条的情况下,滚动条拉动的距离.

scrollTop是指某个可滚动区块向下滚动的距离,比如向下滚动了10个像素,那么这个元素的scrollTop属性值就是10;
offsetTop则是元素的上边框与父元素的上边框的绝对距离。
两者描述的不是同一个东西,所以没有可比性。

javascript中scrollTop和offsetTop的区别的更多相关文章

  1. scrollTop和offsetTop的区别,scrollTopLeft和offsetLeft的区别

    scrollTop和offsetTop的区别:scrollTop是指某个可滚动区块向下滚动的距离,比如向下滚动了10个像素,那么这个元素的scrollTop属性值就是10,这个属性的值是可读写的,且不 ...

  2. JavaScript中:表达式和语句的区别

    JavaScript中:表达式和语句的区别 Javascript语言精粹:表达式是由运算符构成,并运算产生结果的语法结构.程序是由语句构成,语句则是由“:(分号)”分隔的句子或命令.如果在表达式后面加 ...

  3. Javascript中setTimeout和setInterval的区别和使用

    在javascript中,window对象有两个主要的定时方法,分别是setTimeout 和 setInterval,其语法基本上相同,但是完成的功能取有区别. setTimeout方法是定时程序, ...

  4. JavaScript 中 Property 和 Attribute 的区别详解

    property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴. property ...

  5. javascript中typeof与instanceof的区别

    JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: typeof typeof 是一个一元运算,放在一个运算数之前 ...

  6. javascript中基本类型和引用类型的区别分析

    大多数人系统学习过的程序设计语言,在这些语言的学习过程中最早学到的几个要点之一就是值类型和引用类型的区别.下面我们来看一下在 JavaScript 中基本数据类型(Primitive Types)和引 ...

  7. JavaScript 中表达式和语句的区别

    1.语句和表达式 JavaScript中的表达式和语句是有区别的.一个表达式会产生一个值,它可以放在任何需要一个值的地方,比如,作为一个函数调用的参数.下面的每行代码都是一个表达式: myvar3 + ...

  8. javascript 中 typeof 和 instanceof 的区别

    在 javascript 中经常会用到 typeof 和 instanceof 来判断一个对象的类型,可能 typeof 用得多些,那来看看这两个之间的区别吧. typeof : typeof 是一个 ...

  9. 浅谈Java和JavaScript中变量和数据类型的区别

    对于一门编程语言的学习,如果第一步是安装环境,那么第二步一定是学习这门语言的基本规则,变量和数据类型则首当其冲 JavaScipt作为一个蹭Java热度而命名的语言,在很多方面和Java也有一定的相似 ...

随机推荐

  1. elasticsearch无故关闭,Log无报错

    可以看到图中的关闭log之前没有任务报错,这也让博主非常抓狂,这看着就像是人为关闭的,于是博主在群里问是不是有人动过该服务,确认没人关闭后,百度无果,社区上也没找到有关信息,最后灵光一闪,猜测是不是因 ...

  2. ubantu 黑屏

    解决:ubuntu16.04启动时长时间停留在紫屏或跳文本的黑屏界面 - HuangJC 显卡驱动问题,显卡驱动问题,显卡驱动问题.重要的事说三遍.(也许还有其他问题) 解决办法: 1.在引导界面按E ...

  3. js数据类型转换 ----流程控制

    数据类型转换: //number转换成str // var str=a+''; // console.log(str); // console.log(typeof str); //转换成字符串了 v ...

  4. 使用Inent 携带 Bundle 携带 数组 传递给另外一个activity

    在activity发送数组: public static String [] PhoneAndTime = new String[2]; //new 新的Intent Intent data = ne ...

  5. <转载> bat 脚本基本语法 http://blog.csdn.net/bluedusk/article/details/1500629

        bat 脚本基本语法 2007-01-25 10:31 常用命令 echo.@.call.pause.rem(小技巧:用::代替rem)是批处理文件最常用的几个命令,我们就从他们开始学起. = ...

  6. wimform/对话框/Textbox基本方法

    1.ColorDialog:颜色对话框 private void 颜色ToolStripMenuItem_Click(object sender, EventArgs e) { //对话框结果类型定义 ...

  7. HDFS 原理解析

    源自https://www.cnblogs.com/duanxz/p/3874009.html Namenode是整个文件系统的管理节点.它维护着整个文件系统的文件目录树,文件/目录的元信息和每个文件 ...

  8. rem布局js实现

    (function(designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.documentElement ...

  9. VideoView播放视频——Android

    Android为开发人员提供了一种简单的播放视频媒体的方式,那就是VideoView,本篇博客就来讲讲VideoView如何播放视频,最后将以一个简单的Demo演示. VideoView VideoV ...

  10. PHP 字符串两边填充补零

    str_pad顾名思义这个函数是针对字符串来说的这个可以对指定的字符串填补任何其它的字符串 例如:str_pad(带填补的字符串,填补后的长度,填补字符串,填补位置) 其中填补后的长度必须是个正整数, ...