为什么js的currentStyle没有奏效呢？

Question

为什么js的currentStyle没有奏效呢？

Leon

1821541

发布于
2019-01-26

</html>### 为什么js的currentStyle没有奏效呢？

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Title</title>
<style>
    div{width: 100px;height: 50px;background: yellow;margin: 10px;}
</style>
<script>

    window.onload=function () {
        var oDiv1 = document.getElementById('div1')
        var oDiv2 = document.getElementById('div2')

        oDiv1.onmouseover=function () {
            startMove(this,'width',400);
        }
        oDiv1.onmouseout=function () {
            startMove(this,'width',200);
        }

        oDiv2.onmouseover=function () {
            startMove(this,'height',200);
        }
        oDiv2.onmouseout=function () {
            startMove(this,'height',50);
        }

    }

    function getStyle(obj,name){
        if (obj.currentStyle) {
            return obj.currentStyle[name];
        }
       else {
            return getComputedStyle(obj,false)[name];
        }
    }

    function startMove(obj,hh,iTarget) {
        clearInterval(obj.timer);
        obj.timer=setInterval(function () {
            var speed=(iTarget-parseInt(getStyle(obj.hh)))/6;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);

            if (parseInt(getStyle(obj.hh))==iTarget) {
                clearInterval(obj.timer)
            }
            else {
               obj.style[hh]=parseInt(getStyle(obj.hh))+speed+'px';

            }
        },300)
    }
</script>

</head>
<body>
<div id="div1"></div>
<div id="div2"></div>

</body>