运用js获取div宽度，原生JS获取DIV的属性有两种方法，js 获取方法命令如下：
currentStyle和getComputedStyle，前者是兼容IE端的，后者也兼容W3C，两者内核不同，所以就有两种兼容的写法。
如果只是单独的获取某个属性值可以这样写：
obj.currentStyle[属性名]这种不兼容-webkit-内核的，
所以一般是封装成一个函数可以到处调用，而且不止针对某个属性值。
function getStyle(obj,styleName){if(obj.currentStyle){return obj.currentStyle[styleName]}else{return getComputedStyle(obj,null)[styleName]}
}
上面是封装好一个函数，可以直接调用。
DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。DIV在编程中又叫做整除，即只得商的整数。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。
现实世间里，一个物体的宽度是明确的、没有异议的，而在JS的世界里，却有好几种获取div宽度的方法，有时这些方法获取的结果是一致的，有时确不尽相同，这一度让我很困惑。
为了理解width，我们创建一个宽200、高100的div来辅助学习：
首先我先给上结论，之后我会用例子验证结论的正确性：
其中，clientWidth和offsetWidth是原生dom对象的属性，其余的是jQuery对象的方法。
那么下面我们开始验证结论的正确性，此时内容宽度是200px，padding和border都是0px。
因此：
再用浏览器开发者工具(F12)的console验证，此时结论正确：
接着，我们给div加上左右padding(左右padding分别设为20px和30px)：
如果你们跟着写这个demo进行验证，可以发现，在浏览器中，这个div变宽了，那是因为此时用css设定的宽度200是针对内容的，而div的可视区域包括padding和border，因此padding变大了，div也就变大了。
我们接着算现在各种方式的宽度：
验证：
我们再给div加上左右border(左右边框分别设为10px和15px)：
计算宽度：
验证：
最后，我们给div加上左右margin(左右margin分别设为16px和32px)：
计算宽度：
验证：
至此幸不辱命，结论悉数验证通过(验证使用的是谷歌核心的浏览器)，不过还有一点要说明一下：
上面我们说过，css设定的宽度200是针对内容的，其实当我们给div加上样式 box-sizing:border-box 的时候， width:200px 的作用范围就变成也包括border和padding，我们再来验证一下上面最后的那个例子，首先计算宽度：
验证：
此种情况下，结论依然正确，希望至此大家已经理解各种获取div宽度的属性和方法。
javascript获取元素的高度：var obj = document.getElementById("test")
alert(obj.height + "\n" + obj.width)
// 200px 200px typeof=string只是将style属性中的值显示出来
扩展：
获取元素的实际大小
clientWidth和clientHeight
这组属性可以获取元素可视区的大小，可以得到元素内容及内边距所占据的空间大小。返回了元素大小，但没有单位，默认单位是px，如果你强行设置了单位，比如100em之类，它还是会返回px的大小。(CSS获取的话，是照着你设置的样式获取)。对于元素的实际大小，clientWidth和clientHeight理解方式如下：
a. 增加边框，无变化；
b. 增加外边距，无变化；
c. 增加滚动条，最终值等于原本大小减去滚动条的大小；
d. 增加内边距，最终值等于原本大小加上内边距的大小；
