Question

我尝试进行div移动并且一旦到达容器边缘div我就会使用此代码执行此操作，但调试器显示＆＃39;这个错误Cannot read property 'offsetWidth' of undefined

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]

从document.

中删除if (boxRightPos > document.containerElement.offsetWidth) {

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

Answer 2

document.containerElement未定义它应该只是containerElement的外观

Answer 3

document.getElementsByClassName的结果是nodeList个对象。因此，它没有offsetWidth或样式。您可以改为使用document.querySelector('.ball')，或使用containerElement[0]。

到达容器边缘时进行div移动和反弹

3 个答案: