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

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

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

setOff与scrollTop区别的更多相关文章

  1. offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别

    这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离 ...

  2. offsetheight 和clientheight、scrollheight、scrollTop区别

    clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小) scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高 ...

  3. jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...

  4. vue中检测敏感词,锚点

    当发布文章的时候,标题有敏感词 则检测有敏感词的接口成功的时候,写锚点 eg: _this .$alert("检测到标题有敏感词,请修改后再发布", "提示", ...

  5. js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版【转】

    之前在修改IE6下的一个显示bug时,查到过这些,贴这备忘,后面给出了详细说明,以前的版本,没仔细的说明,特希望大家也收藏下.   网页可见区域宽: document.body.clientWidth ...

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

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

  7. javascript中scrollTop和offsetTop的区别

    scrollTop是指某个可滚动区块向下滚动的距离,offsetTop则是元素的上边框与父元素的上边框的绝对距离. 1.offsetTop   : 当前对象到其上级层顶部的距离. 不能对其进行赋值.设 ...

  8. offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解

    一.写在前面 在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offset ...

  9. js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

随机推荐

  1. 「疫期集训day10」玫瑰

    不管我们在怎么抵抗,德国都已经败了----失守苏瓦松后绝望中的德国兵 (貌似今天的题记和内容毫无关系) 觉得以后还是不要抱怨考试失误了,感觉没啥大用 T1暴搜/状压(然俄一看题很像刚写过的二分答案,上 ...

  2. [POJ1852] Ants(思维题)

    题干 An army of ants walk on a horizontal pole of length l cm, each with a constant speed of 1 cm/s. W ...

  3. hdu 4352 XHXJ's LIS 数位DP+最长上升子序列

    题目描述 #define xhxj (Xin Hang senior sister(学姐))If you do not know xhxj, then carefully reading the en ...

  4. zsh切换bash提示chsh: no changes made问题

    前提纪要:1.我们都知道mac有默认bash工具,在下载zsh后,把一切都配置好后,输入切换命令:chsh - s /bin/zsh ,总是提示 chsh: no changes made错误.那我我 ...

  5. 介绍python由来, 安装python3.8.3 及其变量的定义, 小整数池

    介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,Guido开始写能够解释Python语言语法的解释器.Python这个名字,来自Guido所挚爱 ...

  6. Spring-boot 启动报错 调试小技巧

    描述: 我们在启动spring-boot,spring-cloud 项目时,是不是经常 遇到报错,但是在控制台 没有能找到 具体 报错信息,只是 提示,启动失败,缺乏具体的报错信息,这样就很不方便我们 ...

  7. java 数据结构(十二):Collections工具类的使用

    Collections工具类1.作用:操作Collection和Map的工具类 2.常用方法:reverse(List):反转 List 中元素的顺序shuffle(List):对 List 集合元素 ...

  8. 数据可视化之PowerQuery篇(十九)PowerBI数据分析实践第三弹 | 趋势分析法

    https://zhuanlan.zhihu.com/p/133484654 ​本文为星球嘉宾"海艳"的PowerBI数据分析工作实践系列分享之三,她深入浅出的介绍了PowerBI ...

  9. VMWare WorkStation中MacOS虛擬機無法啓動的問題

    關於MacOS虛擬機,在有VMWare重裝,升級以及MacOS更新時,都可能會造成破解補丁失效,因此儅Mac虛擬機無法啓動時,可以嘗試以下操作: 重新運行unlocker208中的win-instal ...

  10. git和github连接权限(这是一个简便方法,不是很安全,建议大家还是用ssh解决)

    在使用,git从github上clone下来代码后. 我们再工作区进行编辑,然后提交. 最后我们想要将我们的改变推送到github上. 但是往往这个时候,我们可能会面临这样的问题. 我们没有权限将代码 ...