变高-Higher
变宽-Wider
字体大小的变化-FontSize
border width






















注意,这里的CSS中有border,但是仍然能够顺利运行

    var oDiv1=document.getElementById('div1');
    var oDiv2=document.getElementById('div2');
    var oDiv3=document.getElementById('div3');
    var oDiv4=document.getElementById('div4');
    
    function getStyle(obj,name)
    {
        if(obj.currentStyle)
        {
            return obj.currentStyle[name];
        }
        else
        {
            return getComputedStyle(obj,false)[name];
        }
    }
    
    function startMove(obj,attr,iTarget)
    {
        clearInterval(obj.timer);
        obj.timer=setInterval(function()
        {
            var cur=parseInt(getStyle(obj,attr));
            var speed=(iTarget-cur)/6;
            speed=speed>0 ? Math.ceil(speed) : Math.floor(speed);
            
            if(cur === iTarget)
            {
                clearInterval(obj.timer);
            }
            else
            {
                obj.style[attr]=cur+speed+'px';
            }
        },30)
    }
    
    oDiv1.onmouseover=function(){startMove(this,'height',400);};
    oDiv1.onmouseout=function(){startMove(this,'height',200);};
    oDiv2.onmouseover=function(){startMove(this,'width',400);};
    oDiv2.onmouseout=function(){startMove(this,'width',200);};
    oDiv3.onmouseover=function(){startMove(this,'fontSize',50);};
    oDiv3.onmouseout=function(){startMove(this,'fontSize',14);};
    oDiv4.onmouseover=function(){startMove(this,'borderWidth',50);};
    oDiv4.onmouseout=function(){startMove(this,'borderWidth',1);};