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. }
11. document.body.clientWidth //500+80=580
12. document.body.clientHeight//350+80=430
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
28. 小結：
29. 無padding無滾動:clientWidth=style.width
30. 有padding無滾動:clientWidth=style.width+padding*2
31. 有padding有滾動:clientWidth=style.width+padding*2-滾動軸寬度
33. clientLeft和clientTop
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. }
11. document.body.offsetWidth //500+80+40=620
12. document.body.offsetHeight//350+80+40=470
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各種寬高的總結