时间戳

首页 > 解决方案 > 为什么我会收到数组中元素的“未捕获的类型错误：无法读取 null 的属性 'style'”？

javascript - 为什么我会收到数组中元素的“未捕获的类型错误：无法读取 null 的属性 'style'”？

问题描述

当我将鼠标光标悬停在这些元素上时，我正在使用 JavaScript 来执行某些元素的初始设置以及对这些元素的操作。当按类名获取元素并遍历它们以更改样式时，我收到“未捕获的类型错误：无法读取 null 的属性'样式'”消息。

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>

奇怪的是，即使抛出错误，设置实际上也会起作用。不过，该错误似乎稍后会导致问题，这就是我现在试图消除它的原因。

标签： javascriptcssarrays

解决方案

正如@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>

推荐阅读