1.offsetTop

功能:获取元素上外缘与最近的定位父元素内壁的距离,如果没有定位父元素,则是与文档上内壁的距离

使用方法:js document.querySelector(...).offsetTop 返回数字类型 只读

注解:边缘:border以外

定位父元素:position为relative,absolute或fixed

内壁:border以内

1.1 style.top

功能:与offsetTop相同

使用方法:js document.querySelector(...).style.top

区别:

a.本身得是定位元素,否则设置了也没有意义;

b.可读写;

c.读:返回字符串,如果没有给它在行内设置top属性,一律返回空字符串,经测试,在<style></style>中写入无用,必须是行内!(操蛋!)

d.写:设置字符串,加上单位,可以是负值,style.top,style.left等均可设置,不管之前有没有写入,行内还是行外均可。

2.offsetLeft

功能:获取元素左外缘与最近的定位父元素内壁的距离,如果没有定位父元素,则是与文档左内壁的距离

使用方法:js document.querySelector(...).offsetLeft 返回数字类型 只读

注解: 不存在offsetBottom或者offsetRight

2.2 style.left(类style.top)

还有style.width,style.height...特性都和style.top一样,一样操蛋。。

3.offsetWidth

功能:获取可视width+padding+border 不包括margin和外滚动条,包括内滚动条

使用方法: js document.querySelector(...).offsetWidth 返回数字类型

什么是可视区域,实际区域?

比如a元素包含b元素,b内容超长,a元素的可视区域就是现在可见的b元素区域,实际区域就是b的全部区域,注意针对的是a元素而不是b元素!对于b元素,可视区域,实际区域是一样的!

4.offsetHeight

功能:获取可视height+padding+border 不包括margin和外滚动条,包括内滚动条

使用方法: js document.querySelector(...).offsetHeight 返回数字类型

备注:JQuery有offset方法,返回的是相当于文档的距离,返回数据为对象{left: 左偏移,top: 上偏移} 偏移值为数字类型

5.clientWidth

功能:获取可视width+ padding,不包括内滚动条

使用方法:js document.querySelector(...).clientWidth 返回数字类型

5.clientHeight

功能:获取可视width+ padding,不包括内滚动条

使用方法:js document.querySelector(...).clientHeight 返回数字类型

6.scrollLeft

功能:获取左移的距离,只能为>=0的数值,越往左越大 可读可写

使用方法:js document.querySelector(...).scrollLeft 返回数字类型

注意事项:使用时相对父元素!

7.scrollTop

功能:获取上移的距离,只能为>=0的数值,越往上越大 可读可写

使用方法:js document.querySelector(...).scrollTop 返回数字类型

注意事项:使用时相对父元素!

8.scrollWidth

功能:获取实际宽度(可超出可视区域!不会比clientWidth小),不包括内滚动条

8.scrollHeight

功能:获取实际高度(可超出可视区域!不会比clientHeigtht小),不包括内滚动条

注意事项:

由于个人习惯,使用时总是倾向于相对子元素而非包含它的父元素,实际上恰恰相反!

在横向出现滚动条的情况下(内部出现,这时不同浏览器对滚动条的处理不同数值会有差异,比如IE,clientWidth会减小,有些不变!width才是实际宽度)

所以大小关系为clientWidth<= width<=offsetWidth,scrollWidth有时最大

特别注意:

出于jquery的习惯,很多人习惯于写document.querySelector(...).width和document.querySelector(...).height

写法是大错特错的,在chrome,IE,firefox上将返回0,safari上返回undefined。

document.documentElement 选择html,document.body选择body

9.getBoundingClientRect

功能:获取元素相对浏览器窗口的位置信息,返回一个对象,包含top、bottom、left、right、width、height

offset,client,scroll,style,getBoundingClientRect相关笔记的更多相关文章

  1. offset/client/scroll一些总结

    offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...

  2. JavaScript中的 offset, client,scroll

    在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...

  3. js中 offset /client /scroll总结

    offset家族(只能读取,不能操作): offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(就是子元素左边框到父元素左边框的距离). offsetTo ...

  4. js 元素offset,client , scroll 三大系列总结

    1,element.offsetWidth : 包括 padding 和 边框 2,element.clientWidth : 包括 padding ,不包含边框 , 内容超出会溢出盒子的时候,就用s ...

  5. offset client scroll

    offsetHeight offsetWidth返回为元素在屏幕上显示大小,不包括外边距 clientHeight clientWidht 和上面两个类似,不同的是,这两个不包括外边距高度. < ...

  6. bom中的offset,client,scroll

    简单明了

  7. JS 中的offset、scroll、client总结

    经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...

  8. python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  9. javascript中常用坐标属性offset、scroll、client

    原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...

随机推荐

  1. Web API中的模型验证Model Validation

    数据注释 在ASP.NET Web API中,您可以使用System.ComponentModel.DataAnnotations命名空间中的属性为模型上的属性设置验证规则. using System ...

  2. 定制iOS 7中的导航栏和状态栏

    本文转载至 http://www.cocoachina.com/industry/20131104/7287.html 跟大多数开发者一样,我也正忙于对程序进行升级以适配iOS 7.最新的iOS 7外 ...

  3. Android开发:《Gradle Recipes for Android》阅读笔记(翻译)5.1——单元测试

    问题: 你想要测试app中的非android部分. 解决方案: 可以使用Android Studio1.1里面增加的单元测支持和Android的Gradle插件. 讨论: ADT插件只支持集成测试,并 ...

  4. MVC结构简介

    本文编译自J2EE的相关文档.MVC(Model-View-Controller)应用程序结构被用来分析分布式应用程序的特征.这种抽象结构能有助于将应用程序分割成若干逻辑部件,使程序设计变得更加容易. ...

  5. 【BZOJ4641】基因改造 KMP

    [BZOJ4641]基因改造 Description "人类智慧的冰峰,只有萌萌哒的我寂寞地守望." --TB TB正走在改造人类智慧基因的路上.TB发现人类智慧基因一点也不萌萌哒 ...

  6. border-radius 原理分析

    border-radius 想必大家都有所了解,比较常见的用法就像下面一样: 注意左边的盒子 border-radius: 100px;  右边的为0哦,所以右边的实际上没有设置圆角边框属性:咱们比较 ...

  7. 使用idea的条件断点快速定位注解的处理类

    看代码时会碰到注解的处理类难定位的情况,比如spring的某个注解我们想知道到底是谁在处理他,他起什么作用,通过普通的代码搜索功能不容易找到,比如好用的方法就是条件断点. 比如下断:Accessibl ...

  8. 浅谈REDIS数据库的键值设计(转)

    add by zhj: 关系数据库表的一条记录可以映射成Redis中的一个hash类型,其实数据库记录本来就是键值对.这样,要比本文中的键设计用更少的键,更节省内存,因为每个键除了它的键值占用内存外, ...

  9. flannel相关资料链接

    1.DockOne技术分享(十八):一篇文章带你了解Flannel http://dockone.io/article/618 2.理解Kubernetes网络之flannel网络http://ton ...

  10. Python__return

    return的注意点: return返回的值, 没有任何类型限制 return是函数结束的标志,函数内可以写多个return,但执行一次,函数就立刻结束,并把return后的值作为本次调用的返回值.