30.JavaScript中操纵样式的部分属性

1.clientWidth、clientHeight、offsetWidth、offsetHeight

• clientWidth、clientHeight：

这两个属性可以获取元素的可见宽度和高度。

获取元素宽度和宽度，包括内容区和内边距（不包括border），这些属性是只读的。

（对于为什么是只读的理解：因为clientWidth和clientHeight的值是包括内容区和内边距，如果我们为clientWidth和clientHeight赋值，那么这个值到底如何分配给内容区和内边距呢？所以这两个属性是只读的）。
               

 

• offsetWidth、offsetHeight:

可以获取元素的整个宽度和高度，包括内容区、内边距和边框。

    
    
    
    
    

    


    按钮btn1
    


    

这些属性都是不带px的，返回都是一个数字，可以直接进行计算。 

---

2.offsetParent

offsetParent：获取当前元素的定位父元素。会获取到当前元素最近的开始了定位的祖先元素。如果所有祖先元素都没有开启定位，则返回body。

• 当网页的结构如下，op.id为“body1”。声明该结构下的box1的定位父元素为body。

    
    
    
    
    
    


    按钮btn1
    


    

• 当我将box1嵌套于box2，box2嵌套于box3时，并且我将box3设置为relative，我再次访问box1的定位父元素，此时运行结果为：box3。

    
    
    
    

    


    按钮btn1
    


    

        

            

        
    

• 当我再为box2开启定位时，运行结果为：box2。代码如下：

    
    
    
    
    
    


    按钮btn1
    


    

        

            

        
    

在此复习一下定位的知识，position的默认值为static，表示未开启定位。当position的值为：absolute（绝对定位）、relative（相对定位）、fixed（绝对定位）即为开启了定位。position还可以取值inherit，其从父元素继承position属性的值，如果父元素开启了定位那么该元素便开启了定位，否则相反。

---

3.offsetLeft、offsetTop

offsetLeft:当前元素相对于其定位父元素的水平偏移量。

 offsetTop:当前元素相对于其定位父元素的垂直偏移量。

    
    
    
    
    
    


    按钮btn1
    


    

        

            

        
    

---

4.scrollWidth和scrollHeight

scrollWidth、scrollHeight：可以获取元素整个滚动区域的宽度和高度。

下面这段代码的结构中，box5嵌套于box4中，但是box4的width和height均大于box5的，为box4设置overflow：auto，此时会出现滚动条。

    
    
    
    

    


    按钮btn1
    



    

        

    

---

5.scrollLeft、scrollTop

scrollLeft、scrollTop:可以获取水平（垂直）滚动条滚动的距离。

    
    
    
    
    
    


    按钮btn1
    



    

        

    

---

6.clientHeight和clientWidth

 当满足scrollHeight-box4.scrollTop==clientHeight,说明垂直滚动条滚动到底了。

 当满足box4.scrollWidth-box4.scrollLeft==clientWidth,说明水平滚动条滚动到底了。

    
    
    
    

    


    按钮btn1