js各种宽高的总结

Posted 2020-10-11

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