css动画过程中无法获取对象的top值

是我获取的方法错了么？不是很了解……新人小白，如有不当请指出们谢谢。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function getDefaultStyle(obj,attribute){
            return obj.currentStyle?obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj,false)[attribute];
        }

        function kao(){
            var asd=document.getElementsByClassName("fall");
            document.getElementById("change").innerHTML=asd.style.top;
          //document.getElementById("change").innerHTML=getDefaultStyle(asd,'top');
        }
    </script>

    <style>
        .fall{
            position: absolute;
            top:-150px;
            animation:myfirst 3s;
            -moz-animation:myfirst 3s; /* Firefox */
            -webkit-animation:myfirst 3s; /* Safari and Chrome */
            -o-animation:myfirst 3s; /* Opera */
        }

        @keyframes myfirst{
            0% { top:-150px;}
            100%{top:800px;}
        }
        @-webkit-keyframes myfirst{
            0% { top:-150px;}
            100%{top:800px;}
        }
        @-o-keyframes myfirst{
            0% { top:-150px;}
            100%{top:800px;}
        }
        @-moz-keyframes myfirst{
            0% { top:-150px;}
            100%{top:800px;}
        }
    </style>

</head>

    <body onload="setInterval('kao()',1000)">


    <p id="change"> 1</p>
    <p class="fall">123</p>
    </body>
</html>

document.getElementById("change").innerHTML=asd.style.top;
这样做只能取到通过内嵌方式设置的样式值，即style属性里面设置的值。

具体看看：style、currentStyle、getComputedStyle区别介绍

【热门文章】