首页 > Web开发 > 详细

js各种宽高的总结

时间:2017-10-18 21:31:33      阅读:219      评论:0      收藏:0      [点我收藏+]

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+滚动条宽度  

js各种宽高的总结

原文:http://www.cnblogs.com/chaofei/p/7688919.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!