为什么会收到数组中元素的“未捕获的TypeError：无法读取null的'样式'属性'”？

Question

当我将鼠标悬停在某些元素上时，我正在使用JavaScript进行某些元素的初始设置和这些元素的操作。通过类名称获取元素并遍历它们以更改样式时，我收到“ Uncaught TypeError：无法读取null的属性'style'”消息。

• 将JavaScript代码定位在主体内外（当前位于主体内HTML文档的末尾）。
• 尝试将ID分配给元素，并改用getElementById。

var cards = document.getElementsByClassName('card');
var initialOffset = 100;

(function initialLoad() {
    for (var i = 0; i <= cards.length; i++) {
        cards[i].style.zIndex = i;

        if (i > 0) {
            cards[i].style.left = cards[i - 1].offsetLeft + initialOffset + 'px';
        }
    }
})();

.card-container {
    position: absolute;
    margin: 20px auto;
}

.card {
    position: absolute;
    background: rgb(236, 236, 236);
    border: 1px solid black;
    height: 250px;
    width: 200px;
}

<header>
    <div class="cards-container">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
    </div>
</header>

奇怪的是，即使抛出错误，该安装程序实际上仍可以起作用。该错误似乎稍后会引起问题，这就是为什么我现在尝试消除此错误。

Answer 1

@str指出，使用<代替<=：

var cards = document.getElementsByClassName('card');
var initialOffset = 100;

(function initialLoad() {
    for (var i = 0; i < cards.length; i++) {
        cards[i].style.zIndex = i;

        if (i > 0) {
            cards[i].style.left = cards[i - 1].offsetLeft + initialOffset + 'px';
        }
    }
})();

.card-container {
    position: absolute;
    margin: 20px auto;
}

.card {
    position: absolute;
    background: rgb(236, 236, 236);
    border: 1px solid black;
    height: 250px;
    width: 200px;
}

<header>
    <div class="cards-container">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
    </div>
</header>

或者按照@Barmar的建议，您可以使用forEach：

var cards = [...document.querySelectorAll('.card')];
var initialOffset = 100;

(function initialLoad() {
    cards.forEach((card, i) => {
      card.style.zIndex = i;

        if (i > 0) {
            card.style.left = cards[i - 1].offsetLeft + initialOffset + 'px';
        }
    });
})();

.card-container {
    position: absolute;
    margin: 20px auto;
}

.card {
    position: absolute;
    background: rgb(236, 236, 236);
    border: 1px solid black;
    height: 250px;
    width: 200px;
}

<header>
    <div class="cards-container">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
    </div>
</header>