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>offsetWidth相关js属性
原文地址：http://www.cnblogs.com/wangweizhang/p/7544563.html