js各种宽高的总结

1.clientWidth和clientHeight
指元素的可视部分宽度和高度，就是padding+content
如果没有滚动条，就是设定的宽度和高度 

如果有滚动条，就是设定的宽度和高度减去滚动条的宽度和高度

 
 
  1. body{  
  2.     border:20px solid #ccc;  
  3.     margin:10px;  
  4.     padding:40px;  
  5.     background:#eee;  
  6.     height:350px;  
  7.     width:500px;  
  8.     overflow:scroll  
  9. }  
  10.   
  11. document.body.clientWidth //500+80=580  
  12. document.body.clientHeight//350+80=430  
  13.   
  14.   
  15.   
  16. #mydiv{  
  17.     width:200px;  
  18.     height:200px;  
  19.     background:red;  
  20.     border:1px solid #eee;  
  21.     overflow:auto;  
  22. }  
  23. //在div中添加文字，出现滚动条  
  24. var mydiv=document.getElementById('mydiv');  
  25. mydiv.clientHeight//200  
  26. mydiv.clientWidth//200-7  
  27.   
  28. 小结：  
  29.     无padding无滚动:clientWidth=style.width  
  30.     有padding无滚动:clientWidth=style.width+padding*2  
  31.     有padding有滚动:clientWidth=style.width+padding*2-滚动轴宽度  
  32.   
  33. clientLeft和clientTop  
  34.   
  35. 这一对属性是读取元素border的宽度和高度  
  36. clientTop=border-top的border-width  
  37. clientLeft=border-left的border-width  


2.offsetWidth offsetHeight 

 

就是padding+content+border

 
 
    1. body{  
    2.     border:20px solid #ccc;  
    3.     margin:10px;  
    4.     padding:40px;  
    5.     background:#eee;  
    6.     height:350px;  
    7.     width:500px;  
    8.     overflow:scroll  
    9. }  
    10.   
    11. document.body.offsetWidth //500+80+40=620  
    12. document.body.offsetHeight//350+80+40=470  
    13.   
    14. 小结：  
    15.     无padding无滚动无border  
    16.     offsetWidth=clientWidth=style.width  
    17.     有padding无滚动有border  
    18.     offsetWidth=style.width+style.padding*2+(border-width)*2  
    19.     offsetWidth=clientWidth+(border-width)*2  
    20.     有padding有滚动有border  
    21.     offsetWidth=style.width+style.padding*2+(border-width)*2+滚动条宽度  
posted @ 2017-10-18 21:00  逗比煎饼侠  阅读(142)  评论(0)  编辑  收藏  举报