zoukankan      html  css  js  c++  java
  • 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.     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.     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.     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+滚动条宽度  
  • 相关阅读:
    待解决问题集锦
    蓝桥杯--- 历届试题 连号区间数(水题)
    蓝桥杯---历届试题 翻硬币 (水题)
    nyoj 678 最小K个数之和
    hdoj 2 括号配对问题【数组模拟实现+STL实现】
    hdoj 1016 Prime Ring Problem
    nyoj 62 笨小熊
    nyoj 47 过河问题
    nyoj 456 邮票分你一半
    nyoj 171 聪明的kk
  • 原文地址:https://www.cnblogs.com/chaofei/p/7688919.html
Copyright © 2011-2022 走看看