假如有两个div，一个div要变宽，一个div要变高，你怎么写呢？
哎呀，写2个方法啊，一个控制div1变宽，一个控制div2变高啊
那么你的代码，是不是下面这样的呢！
示例：Div变宽和变高
现象：div1在onmouseover时变宽,onmouseout时恢复原大小;
div2在onmouseover时变高，onmouseout时恢复原大小
缺点：重复的代码写了好几个方法
html部分
<div id="div1"></div>
<div id="div2"></div>
<style>
div { width:100px; height:150px; margin:20px; background:green;}
</style>
js部分
<script>
window.onload = function(){
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
oDiv1.onmouseover = function(){
startMove1(this,300);
}
oDiv1.onmouseout = function(){
startMove1(this,100);
}
oDiv2.onmouseover = function(){
startMove2(this,300);
}
oDiv2.onmouseout = function(){
startMove2(this,150);
}
}
function startMove1(obj,iTarget){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (iTarget - obj.offsetWidth)/6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(obj.offsetWidth == iTarget){
clearInterval(obj.timer);
} else {
obj.style.width = obj.offsetWidth + speed + "px";
}
},30);
}
function startMove2(obj,iTarget){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (iTarget - obj.offsetHeight)/6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(obj.offsetHeight == iTarget){
clearInterval(obj.timer);
} else {
obj.style.height = obj.offsetHeight + speed + "px";
}
},30);
}
</script>
额，上面的代码，本来是一个运动框架的，却写了两个类似的方法。
而且还使用了offset，这是有缺陷的啊
那么，可不可以用一个方法就解决这个问题了呢。
可以的
回想 js你真的了解offsetWidth吗，有没有给我们带来什么启发呢？
http://www.cnblogs.com/huaci/p/3863797.html
对了，利用function getStyle(obj,name)，我们就可以控制多个属性值的改变啦
原理：var attr= parseInt(getStyle(obj,name));
修改后的完整代码，如下：
js部分
<script>
window.onload = function(){
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
oDiv1.onmouseover = function(){
startMove(this,"width",300);
}
oDiv1.onmouseout = function(){
startMove(this,"width",100);
}
oDiv2.onmouseover = function(){
startMove(this,"height",300);
}
oDiv2.onmouseout = function(){
startMove(this,"height",150);
}
}
function startMove(obj,name,iTarget){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var attr = parseInt(getStyle(obj,name));
var speed = (iTarget - attr)/6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(attr == iTarget){
clearInterval(obj.timer);
} else {
obj.style[name] = attr + speed + "px";
}
},30);
}
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
} else{
getComputed(obj,null)[name];
}
}
</script>
原文：http://www.cnblogs.com/huaci/p/3866361.html