为什么我获取到的aDiv.style.width的值为空
style.xxx这个要求写的是行内样式，比如<div style="xx"/>，你可以用offsetWidth
但是offsetWidth的宽度是加上padding和border的，哎，这样我们在世纪应用中一定要去除。
如果要得到真实的width，我们可以先使用getComputedStyle
如果能获得width证明没有问题，如果获得不了，我们就用offsetWidth减去padding和border，这个我们可以进行封装一下。
具体如何获取 DOM 元素的绝对位置实例详解
参看下面的地址 JS中获取 DOM 元素的绝对位置实例详解
offsetWidth是什么？
答：它可以获取物体宽度的数值
那么就只是这样吗！
html部分
<div id="div1"></div><style>#div1 { width:200px; height:200px; border:1px solid red; padding:2px; margin:2px; background:green;}</style> |
请看上面的html，你知道div1的offsetWidth是多少吗？
是不是200啊
哈哈，错了
div1的offsetWidth是206
为什么?
答：offsetWidth实际获取的是盒模型(width+border + padding)
200+2+4=206
扩展：那么offsetLeft和offsetTop呢
答： offsetLeft = left + marginLeft
offsetTop = top +marginTop
示例：让div变窄
现象：onmouseover时，div变窄
原理：
oDiv.style.width = oDiv.offsetWidth - 1 + "px";
js部分
<script>window.onload = function(){ var oDiv = document.getElementById("div1");
oDiv.onmouseover = function(){
document.title = oDiv.offsetWidth;
setInterval(function(){
oDiv.style.width = oDiv.offsetWidth - 1 + "px";
},30);
}
}
</script>
运行上面示例后，你会发现一个奇怪的现象:
div在变宽
我们不是要div变窄的吗！它怎么越来越宽了呢？
那么这个问题，怎么解决呢？
解决方式：
用oDiv.style.width = parseInt(oDiv.style.width) - 1 + "px";
但是发现，onmouseover时，div它不动呢？
原因：oDiv.style.width，它只能获取行间的样式
所以需要调整成
<div id="div1" style="width:200px;"></div>
其实，我们还可以写成一个通用的方法，可以获取任意一个样式
方法：function getStyle(obj,name)
注意：此时样式可以不是行间样式，也能获取
知识点：
IE写法：currentStyle
非IE写法: getComputedStyle
完整代码，如下
1 2 3 4 5 | <div id="div1"></div><style>#div1 { width:200px; height:200px; border:1px solid red; padding:2px; margin:2px; background:green;}</style> |
<script>window.onload = function(){ var oDiv = document.getElementById("div1");
oDiv.onmouseover = function(){
document.title = oDiv.offsetWidth;
setInterval(function(){ //oDiv.style.width = oDiv.offsetWidth - 1 + "px"; //oDiv.style.width = parseInt(oDiv.style.width) - 1 + "px";
oDiv.style.width = parseInt(getStyle(oDiv,"width"))- 1 + "px";
},30);
}
}//获取行间任意样式function getStyle(obj,name){
if(obj.currentStyle){ //IE
return obj.currentStyle[name];
} else { return getComputedStyle(obj,false)[name]; //非IE }
}</script>