javascript offsetTop 属性既成功又同时出错答案

【问题标题】：javascript offsetTop property both successful and has an error at the same timejavascript offsetTop 属性既成功又同时出错
【发布时间】：2017-03-08 01:53:21
【问题描述】：

以下代码执行成功：

var $ = document.querySelector.bind(document);

function windowScroll() {
    var elems = ['section-1', 'section-2', 'section-3', 'section-4'];
    elems.forEach(function(elem) {
        if(window.pageYOffset >= $(`#${elem}`).offsetTop - $('.banner-header').offsetHeight) {
            var li = document.querySelectorAll('.banner-header > nav > a');
            for(var i = 0; i < li.length; i++) {
                li[i].classList.remove('active-nav-item');
            }
            $(`.banner-header > nav > a[href='#${elem}']`).classList.add('active-nav-item');
        } else {
            $(`.banner-header > nav > a[href='#${elem}']`).classList.remove('active-nav-item');
        }
    });
}

function elementEvent(element, onEvent, eventCallback) {
    if(element.addEventListener) {
        element.addEventListener(onEvent, eventCallback, false);
    } else {
        element.attachEvent(onEvent, eventCallback);
    }
}

elementEvent(window, 'scroll', windowScroll);

当我打开控制台时，我刚刚注意到一些东西，显示此错误消息是指第 6 行：

未捕获的类型错误：无法读取 null 的属性“offsetTop”

offsetTop 属性是什么使它变得复杂？我应该在我的代码中进行哪些更改以使其正确？

【问题讨论】：

标签： javascript html offset

【解决方案1】：

offsetTop 没有任何问题。但是，您的错误 Uncaught TypeError: Cannot read property 'offsetTop' of null 意味着 parent 对象是 null，而 null.offsetTop 不存在。所以看起来$(`#${elem}`) 正在为某些元素返回null。确保数组中的每个元素都存在于 DOM 中。

【讨论】：

$(`#${elem}`) 没有任何问题，您只是想获取一个 ID 为 elem 的元素。但如果该元素不存在，那么您将收到错误，因为函数返回 null 和 null.offsetTop 将导致 TypeError。
我现在明白了。谢谢，伙计