js各种宽高的总结

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

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

body{
    border:20px solid #ccc;
    margin:10px;
    padding:40px;
    background:#eee;
    height:350px;
    500px;
    overflow:scroll
}

document.body.clientWidth //500+80=580
document.body.clientHeight//350+80=430



#mydiv{
    200px;
    height:200px;
    background:red;
    border:1px solid #eee;
    overflow:auto;
}
//在div中添加文字，出现滚动条
var mydiv=document.getElementById('mydiv');
mydiv.clientHeight//200
mydiv.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-width
clientLeft=border-left的border-width

2.offsetWidth offsetHeight 

就是padding+content+border

body{
    border:20px solid #ccc;
    margin:10px;
    padding:40px;
    background:#eee;
    height:350px;
    500px;
    overflow:scroll
}

document.body.offsetWidth //500+80+40=620
document.body.offsetHeight//350+80+40=470

小结：
    无padding无滚动无border
    offsetWidth=clientWidth=style.width
    有padding无滚动有border
    offsetWidth=style.width+style.padding*2+(border-width)*2
    offsetWidth=clientWidth+(border-width)*2
    有padding有滚动有border
    offsetWidth=style.width+style.padding*2+(border-width)*2+滚动条宽度