javascript - 为什么我得到数组中元素的 "Uncaught TypeError: Cannot read property ' style' of null"？

Question

当我将鼠标光标悬停在这些元素上时，我正在使用 JavaScript 执行某些元素的初始设置和这些元素的操作。当按类名获取元素并遍历它们以更改样式时，我收到“Uncaught TypeError: Cannot read property 'style' of null”消息。

• 将 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>