offsetHeight、offsetWidth、offsetLeft、offsetTop

    
    
    



    

       
offset 
        
offset 
        
offset 
        
offset 
        
offset 
        
offset 
        
offset 
        
offset 
        
offset 
        
offset 
        
offset 
        
offset 
        
offset 
        
offset 
        
offset 
        
offset 
    


    window.onload = function () {  
        console.log(box.offsetHeight);//200
        console.log(box.offsetWidth);//200
        console.log(box.offsetLeft);//0
        console.log(box.offsetTop);//0
        console.log('-------------------------------');
        console.log(box1.offsetHeight);//120
        console.log(box1.offsetWidth);//120
        console.log(box1.offsetLeft);//10
        console.log(box1.offsetTop);//10
    }

1、offsetWidth実際に取得したのはボックスモデルである

offsetWidth = width + border + padding

offsetWidth=Width+(left)border+(right)border+(left)padding+(right)padding

-------------------------------------------------------------------------------------------
2、offsetHeight実際に入手したのはボックスモデル

offsetHeight = height + border + padding

offsetHeight=height+(top)border+(bottom)border+(top)padding+(bottom)padding

-------------------------------------------------------------------------------------------
3、offsetLeft実際に入手したのはボックスモデル

offsetLeft = left + marginLeft

(offsetleftはoffsetparentから左の間隔を表します)

(offsetleftは親の位置に基づいて距離を決定する)
-------------------------------------------------------------------------------------------
4、offsetTop実際に入手したのはボックスモデルである

offsetTop = top +marginTop

(offsetleftはoffsetparentからの上端ピッチを表す)

(offsetleftは親の位置に基づいて距離を決定する)
-------------------------------------------------------------------------------------------