javascript - 使 div 移动并在到达容器边缘时反弹

Question

我正在尝试使 div 移动并在到达容器 div 的边缘后反弹 我正在使用此代码来执行此操作，但调试器显示的是错误 无法读取未定义的属性“offsetWidth”

var speed = 10,
     direction = 1;

     var ballElement = document.getElementsByClassName('ball'),
         containerElement = document.getElementsByClassName('mainDiv');
     if (ballElement) {
        var boxLeftPos = ballElement.offsetLeft,
            boxRightPos = boxLeftPos + ballElement.offsetWidth;

            if (boxRightPos > document.containerElement.offsetWidth) {
                direction = -1;
            }

            if (boxLeftPos < 0) {
                direction = 1;
            }

            ballElement.style.left = (boxLeftPos + speed * direction) + 'px';
     }  

错误在这一行:

if (boxRightPos > document.containerElement.offsetWidth)

LIVE DEMO

Answer 1

getElementsByClassName 返回一个数组。如果您只有该类的一个元素，请添加 [0] 以检索它:getElementsByClassName('ball')[0]

从 if (boxRightPos > document.containerElement.offsetWidth) {

中删除 document.

工作演示:http://jsfiddle.net/7rw1t8eh/