介绍JavaScript的offset、client、scroll家族属性

Javascript栏目介绍offset、client、scroll家族属性。

定位父级

在理解偏移大小之前，首先要理解offsetParent。人们并没有把offsetParent翻译为偏移父级，而是翻译成定位父级，很大原因是offsetParent与定位有关

定位父级offsetParent的定义是：与当前元素最近的经过定位(position不等于static)的父级元素，主要分为下列几种情况

1. 元素自身有fixed定位，offsetParent的结果为null

   当元素自身有固定定位时，我们知道固定定位的元素相对于视口进行定位，此时没有定位父级，offsetParent的结果为null

   　[注意]firefox浏览器有兼容性问题

2. 元素自身无fixed定位，且父元素都没有设置定位，offsetParent的结果为body

3. 元素自身无fixed定位，且父级元素存在经过定位的元素，offsetParent的结果为离自身元素最近的经过定位的父级元素

4. 元素的offsetParent是null

console.log(document.body.offsetParent);//null 

偏移量

偏移量共包括了offsetHeight、offsetWidth、offsetLeft、offsetTop这四个属性

offsetWidth

offsetWidth表示元素在水平方向上占用的空间大小，无单位(以像素px计)

offsetWidth =  border-left-width + padding-left + width + padding-right + border-right-width; 
 

offsetHeight

　　offsetHeight表示元素在垂直方向上占用的空间大小，无单位(以像素px计)

offsetHeight =  border-top-width + padding-top + height + padding-bottom + border-bottom-width 

测试：

注意：如果想修改盒子的大小，请使用xxx.style.width进行设置。offsetWidth和offsetHeight是只读属性

offsetTop

　　offsetTop表示元素的上外边框至offsetParent元素的上内边框之间的像素距离

offsetLeft

　　offsetLeft表示元素的左外边框至offsetParent元素的左内边框之间的像素距离

测试:

总结：相对于父元素（看父元素是否有定位，如果有定位，以父元素为基础，如果没有继续往上寻找，如果一直没有找到，则以body为基准）的左边距和上边距

求出当前元素的页面偏移量

要知道某个元素在页面上的偏移量，将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加，并加上offsetParent的相应方向的边框，如此循环直到根元素，就可以得到元素到页面的偏移量

client家族

关于元素尺寸，一般地，有偏移大小offset、客户端大小client和滚动大小scroll。前文已经介绍过偏移属性，后文将介绍scroll滚动大小，本文主要介绍客户区大小client。

客户区大小

客户区大小client指的是元素内容及其内边距所占据的空间大小

clientWidth

clientHeight属性返回元素节点的客户区高度

clientHeight = padding-top + height + padding-bottom 

clientHeight

clientWidth属性返回元素节点的客户区宽度

clientWidth = padding-left + width + padding-right 

clientLeft

clientLeft属性返回左边框的宽度 

clientTop

clientTop属性返回上边框的宽度	
 

验证

页面大小

常用document.documentElement的client属性来表示页面大小(不包含滚动条宽度)

document.documentElement.clientWidth;document.documentElement.clientHeight; 

注意

1.所有的client属性都是只读的

2.如果给元素设置了display:none，则客户区client属性都为0

3.每次访问客户区client属性都需要重新计算，重复访问需要耗费大量的性能，所以要尽量避免重复访问这些属性。如果需要重复访问，则把它们的值保存在变量中，以提高性能

scroll家族

滚动宽高

scrollHeight

　　scrollHeight表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分

scrollWidth

　　scrollWidth表示元素的总宽度，包括由于溢出而无法展示在网页的不可见部分

1. 没有滚动条时，scrollHeight与clientHeight属性结果相等，scrollWidth与clientWidth属性结果相等

2. 存在滚动条时，但元素设置宽高大于等于元素内容宽高时，scroll和client属性的结果相等

滚动长度

scrollTop

scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，表示元素上方不可见内容的像素高度

scrollLeft

scrollLeft属性表示被隐藏在内容区域左侧的像素数。元素未滚动时，scrollLeft的值为0，如果元素被水平滚动了，scrollLeft的值大于0，且表示元素左侧不可见内容的像素宽度

当滚动条滚动到内容底部时，符合以下等式

scrollHeight = scrollTop + clientHight 

与scrollHeight和scrollWidth属性不同的是，scrollLeft和scrollTop是可写的

    内容
内容
向下滚动向上滚动 

页面滚动

理论上，大部分的浏览器通过document.documentElement.scrollTop和scrollLeft可以反映和控制页面的滚动；safari浏览器是通过document.body.scrollTop和scrollLeft来控制的

    

        内容
内容

    
     

所以，页面的滚动高度兼容写法是

var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop 

回到顶部

    
        
        
    
    
        回到顶部
        
     

滚动方法

scrollTo(x,y)

scrollTo(x,y)方法滚动当前window中显示的文档，让文档中由坐标x和y指定的点位于显示区域的左上角

    回到顶部
    
     

相关免费学习推荐：Javascript（视频）

以上就是介绍Javascript的offset、client、scroll家族属性的详细内容，更多请关注 第一PHP社区 其它相关文章！