BOM部分的元素系列

•  console.log(box.scrollWidth); 
          console.log(box.scrollHeight); 

  元素的offset系列属性

• 元素的client系列属性

• 元素的scrollTop属性

1.元素的offset系列属性(会四舍五入)

 元素.offsetWidth / 元素.offsetHeight; （当给元素添加box-sizing: border-box;的时候，只计算内容宽度）返回的是数字。 大小包含： 内容 + padding + border;

 <style>
   
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            height: 500px;
            width: 500px;
            margin-left: 700px;
            border: 50px solid black;
            padding: 50px;
            background: linear-gradient(red,yellow);
            box-sizing: border-box;
        }
    </style>



            <div class="box"> </div>
<script>
        var box=document.querySelector('.box')
     
        console.log(box.offsetLeft);                 //700
        console.log(box.offsetTop);                 //0
        console.log(box.offsetWidth);              //500
        console.log(box.offsetHeight,'******');   //500    
       
         //当没有 box-sizing: border-box;的时候
        console.log(box.offsetLeft);                 //700
        console.log(box.offsetTop);                 //0
        console.log(box.offsetWidth);              //700
        console.log(box.offsetHeight,'******');   //700   
        
        
 </script>

2.

元素的client系列属性(会四舍五入)

client系列：

[clientWidth，clientHeight]

[clientLeft，clientTop]

 获取元素的大小：包含 【内容 + padding】

​<style>
.box{
            height: 500px;
            width: 500.6px;
            margin-left: 700px;
            margin-top: 120px;
            border: 50px solid black;
            padding: 50px;
            background: linear-gradient(red,yellow);
            /* box-sizing: border-box; */
        }

​</style>
    

            <div class="box">
                </div>

      
   

    <script>
        var box=document.querySelector('.box')
       
        //​	[clientWidth，clientHeight]   [clientLeft，clientTop]
        console.log(box.clientWidth);   //601
        console.log(box.clientHeight);  //60
        console.log(box.clientLeft);    //50  （border的值）
        console.log(box.clientTop);     //50

 //当有 box-sizing: border-box;的时候
        console.log(box.clientWidth);   //400   （原来的宽度width-padding*2）
        console.log(box.clientHeight);  //400
        console.log(box.clientLeft);    //50
        console.log(box.clientTop);     //50
    </script>

​

3.元素的scroll系列属性

元素.scrollWidth / 元素.scrollHeight

获取的元素的大小 ,包含 【内容+ padding + 溢出】

​<style>
.box{
            height: 500px;
            width: 500px;
            margin-left: 700px;
            margin-top: 120px;
            border: 50px solid black;
            padding: 50px;
            background: linear-gradient(red,yellow);
            /* box-sizing: border-box; */
        }

​</style>
    

            <div class="box">
                </div>

      
   

    <script>
        var box=document.querySelector('.box')
        console.log(box.scrollWidth);     //600
        console.log(box.scrollHeight);     //600
       

 //当有 box-sizing: border-box;的时候
        console.log(box.scrollWidth);     //400
        console.log(box.scrollHeight);     //400
        
    </script>