js各种宽高的总结

1.clientWidth和clientHeight
指元素的可视部分宽度和高度，就是padding+content
如果没有滚动条，就是设定的宽度和高度 

如果有滚动条，就是设定的宽度和高度减去滚动条的宽度和高度

body{border:20px solid #ccc;margin:10px;padding:40px;background:#eee;height:350px;width:500px;overflow:scroll}document.body.clientWidth //500+80=580document.body.clientHeight//350+80=430#mydiv{width:200px;height:200px;background:red;border:1px solid #eee;overflow:auto;}//在div中添加文字，出现滚动条var mydiv=document.getElementById('mydiv');mydiv.clientHeight//200mydiv.clientWidth//200-7小结：无padding无滚动:clientWidth=style.width有padding无滚动:clientWidth=style.width+padding*2有padding有滚动:clientWidth=style.width+padding*2-滚动轴宽度clientLeft和clientTop这一对属性是读取元素border的宽度和高度clientTop=border-top的border-widthclientLeft=border-left的border-width

2.offsetWidth offsetHeight 

就是padding+content+border

body{border:20px solid #ccc;margin:10px;padding:40px;background:#eee;height:350px;width:500px;overflow:scroll}document.body.offsetWidth //500+80+40=620document.body.offsetHeight//350+80+40=470小结：无padding无滚动无borderoffsetWidth=clientWidth=style.width有padding无滚动有borderoffsetWidth=style.width+style.padding*2+(border-width)*2offsetWidth=clientWidth+(border-width)*2有padding有滚动有borderoffsetWidth=style.width+style.padding*2+(border-width)*2+滚动条宽度