JavaScript

offset,client,scroll的使用和区别

字数:975    阅读时间:5min
阅读量:5046

offset偏移量

  • offsetWidth:元素在水平方向所占的空间大小(元素的宽;包括外边框,内边距和内容)
  • offsetHeight:元素子在垂直方向上所占的空间的大小( 元素的高;包括外边框,内边距和内容 )
  • offsetLeft:元素的左边框到包含元素的左边框的距离(注意包含元素具体是指哪个元素)
  • offsetTop:元素的上边框到包含元素的上边框的距离 (注意包含元素具体是指哪个元素)
  • offsetParent:包含该元素的那个元素; (包含元素:并不一定是这个元素的父元素,会沿着DOM树一直向上找直到找到有设置position的元素,这个元素才是该元素的包含元素)
offset视图

我们使用offsetLeft和offsetTop的时候,一般都是来获取元素距离页面顶部或者左边多少像素;这个时候我们需要利用offsetTop或offsetLeft配合offsetParent循环DOM树累加每一个offset值,直到DOM树的根元素(offsetParent = null)

client客户区

  • client表示的是元素客户区大小;指的是元素内容和内边距占据空间的大小;
    • clientWidth:可视区宽度大小(不包括border)
    • clientHeight:可视区高度大小(不包括border)
    • clientLeft:可视区的左边距大小(borderLeft的宽度)
    • clientTop:可视区上边距的大小(borderTop的大小)
client视图

一般我们使用clientWidth或者clientHeight就是获取视窗的大小;使用document.documentElement.clientWidth或者 document.body.clientWidth(兼容IE7以下版本)

scroll滚动区

  • scrollHeight:卷曲的高度和可视区的高度(即整个高度)
  • scrollWidth:卷曲的宽度和可视区的宽度(即整个宽度)
  • scrollTop:距离顶部已卷曲的高度
  • scrollLeft:距离左侧已卷曲的宽度
scroll视图

一般使用scroll就是获取页面卷曲的高度或宽度;这个时候需要注意获取页面的元素document.documentElement或者document.body(兼容IE7以下)

野生小园猿
励志做一只遨游在知识海洋里的小白鲨
查看“野生小园猿”的所有文章 →

发表评论

邮箱地址不会被公开。

相关推荐