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. document.body.clientWidth //500+80=580
11. document.body.clientHeight//350+80=430
12. #mydiv{
13. width:200px;
14. height:200px;
15. background:red;
16. border:1px solid #eee;
17. overflow:auto;
18. }
19. //在div中添加文字，出现滚动条
20. var mydiv=document.getElementById('mydiv');
21. mydiv.clientHeight//200
22. mydiv.clientWidth//200-7
23. 小结：
24. 无padding无滚动:clientWidth=style.width
25. 有padding无滚动:clientWidth=style.width+padding*2
26. 有padding有滚动:clientWidth=style.width+padding*2-滚动轴宽度
27. clientLeft和clientTop
28. 这一对属性是读取元素border的宽度和高度
29. clientTop=border-top的border-width
30. 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. document.body.offsetWidth //500+80+40=620
11. document.body.offsetHeight//350+80+40=470
12. 小结：
13. 无padding无滚动无border
14. offsetWidth=clientWidth=style.width
15. 有padding无滚动有border
16. offsetWidth=style.width+style.padding*2+(border-width)*2
17. offsetWidth=clientWidth+(border-width)*2
18. 有padding有滚动有border
19. offsetWidth=style.width+style.padding*2+(border-width)*2+滚动条宽度