javascript抓不到圖片的top?

Question

大家好，我想要在網頁上作視差滾動的效果，於是寫了一段javascript插在html裡:

<img class="graphic_001" src="img/parallax_graphic/tri-yellow.svg"/>
                <script type="text/javascript">
                        function parallex () {
                        var img = window.pageYOffset;
                        var a = document.getElementsByClassName('graphic_001');
                        var speed = 0.8;
                        a.style.top = img * speed +'px';
                    }
                    window.addEventListener('scroll',parallex);
                </script>

但是打開瀏覽器之後，瀏覽器報錯沒有抓到圖片的top，而且只要一滾動就會報錯:

想請問應該怎麼修正javascript呢?目前確認圖片是有載到網頁上的，謝謝大家的回答!

Answer 1

getElementsByClassName的返回值是个nodeList，类数组结构，所以应该要取角标

 a[0].style.top = img * speed +'px';

尝试修改成这样是否有效果

Answer 2

第一如楼上所说
第二 img的src加载需要一个过程，所以建议加入口函数window.onload或者img.onload