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=580
document.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//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;
	width: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+滚动条宽度