javascript中scrollTop和offsetTop的区别
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的区别的更多相关文章
- scrollTop和offsetTop的区别,scrollTopLeft和offsetLeft的区别
scrollTop和offsetTop的区别:scrollTop是指某个可滚动区块向下滚动的距离,比如向下滚动了10个像素,那么这个元素的scrollTop属性值就是10,这个属性的值是可读写的,且不 ...
- JavaScript中:表达式和语句的区别
JavaScript中:表达式和语句的区别 Javascript语言精粹:表达式是由运算符构成,并运算产生结果的语法结构.程序是由语句构成,语句则是由“:(分号)”分隔的句子或命令.如果在表达式后面加 ...
- Javascript中setTimeout和setInterval的区别和使用
在javascript中,window对象有两个主要的定时方法,分别是setTimeout 和 setInterval,其语法基本上相同,但是完成的功能取有区别. setTimeout方法是定时程序, ...
- JavaScript 中 Property 和 Attribute 的区别详解
property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴. property ...
- javascript中typeof与instanceof的区别
JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: typeof typeof 是一个一元运算,放在一个运算数之前 ...
- javascript中基本类型和引用类型的区别分析
大多数人系统学习过的程序设计语言,在这些语言的学习过程中最早学到的几个要点之一就是值类型和引用类型的区别.下面我们来看一下在 JavaScript 中基本数据类型(Primitive Types)和引 ...
- JavaScript 中表达式和语句的区别
1.语句和表达式 JavaScript中的表达式和语句是有区别的.一个表达式会产生一个值,它可以放在任何需要一个值的地方,比如,作为一个函数调用的参数.下面的每行代码都是一个表达式: myvar3 + ...
- javascript 中 typeof 和 instanceof 的区别
在 javascript 中经常会用到 typeof 和 instanceof 来判断一个对象的类型,可能 typeof 用得多些,那来看看这两个之间的区别吧. typeof : typeof 是一个 ...
- 浅谈Java和JavaScript中变量和数据类型的区别
对于一门编程语言的学习,如果第一步是安装环境,那么第二步一定是学习这门语言的基本规则,变量和数据类型则首当其冲 JavaScipt作为一个蹭Java热度而命名的语言,在很多方面和Java也有一定的相似 ...
随机推荐
- vue的v-for数组和对象
v-for="(item,index) of hot" //数组遍历 v-for="(item,key,index) of cities" //对象遍历 //k ...
- 安全测试2_Web前端知识学习
上次讲到安全的简介,这次就来简单的学习下基本的前端知识(html.js.css(不作讲解),牛逼的请忽略!!! 1.Html简单概述: Html和Html DOM 2.Html字符实体(借用别人的,详 ...
- 《算法》第三章部分程序 part 6
▶ 书中第三章部分程序,加上自己补充的代码,包含双向索引表.文建索引.稀疏向量类型 ● 双向索引表 package package01; import edu.princeton.cs.algs4.S ...
- <转载> FreeNAS的安装和简单配置 http://freenas.cn/?p=342
前些日子在公司搭了一个模拟生产环境的平台.由于是测试环境,资源有限只能使用虚拟机实现,所以存储这块就想到了使用FreeNAS.很早以前玩儿过几次,当时是生产环境需要上存储设备,经过对比还是选择的更可靠 ...
- spark 实现TOP N
数据量较少的情况下: scala> numrdd.sortBy(x=>x,false).take(3) res17: Array[Int] = Array(100, 99, 98) sca ...
- django之Model类
Model是model的基类,该类的metaclass是modelbase,在生成model类对象时是采用modelbase的.django.setup()时,apps会把app建立app_confi ...
- DDD领域驱动设计(例子)
参考:https://tech.meituan.com/DDD_in_%20practice.html
- 【ASP.NET 进阶】TreeView控件学习
这几天上班没事做,也不好打酱油,学点没接触过的新东西吧,基本了解了下TreeView控件. TreeView 控件用于在树结构中显示分层数据,例如目录或文件目录等. 下面看代码吧: 1.效果图 2.静 ...
- C#串口传输中文字符
发送: Encoding gb = System.Text.Encoding.GetEncoding("gb2312"); byte[] bytes = gb.GetBytes ...
- node 支持es6
安装 babel-cli, 全局安装 npm install babel-cli -g 然后 在工程目录下 安装 npm install babel-cli --save npm install b ...