javascript
<body>
<div id="box"></div>
<style>
#box{
200px;
height:100px;
padding:5px;
border:1px solid red;
margin:10px auto;
}
</style>
<script>
var oBox=document.getElementById('box');
var cssJson=oBox.currentStyle||getComputedStyle(oBox);//兼容
alert(cssJson.width);//width 200px
alert(oBox.clientWidth);//width+padding 210px
//document.documentElement.clientWidth 可视窗口，宽口拉伸；
alert(oBox.offsetWidth);//width+padding+border 212px
</script>
</body>
扩展：
scrollWidth:内容的实际宽，即使超出隐藏，也不影响。
window.screen.width/heigh:实际电脑的分辨率
window.screen.availWidth/availHeight:去除任务栏后的电脑分辨率
document.documentElement.scrollTop/scrollLeft || document.body.scrollTop:滚动高度
oBox.offsetLeft:获取盒子初始left
pageX:文档中鼠标的宽度，不兼容IE876，处理方法：clientX+scrollLeft
jQuery
var a = 元素本身的宽度；
width() = a；
innerWidth() = a+padding;
outerWidth() = a+padding+border;
outerWidth(true) = a+padding+border+margin;