未捕获的类型错误：无法读取未定义的属性（读取“样式”）答案

【问题标题】：Uncaught TypeError: Cannot read properties of undefined (reading 'style')未捕获的类型错误：无法读取未定义的属性（读取“样式”）
【发布时间】：2021-09-27 15:21:22
【问题描述】：

我正在开发一个 HTML 模板，我在该模板上有两种不同的颜色主题，深色/浅色。我想创建一个功能，如果操作系统上有深色主题，则默认情况下会打开网站深色主题，但如果操作系统上有浅色主题，则默认情况下会打开网站浅色主题。

我有多个不同部分的徽标，所以我通过它们的类名抓取它们，并根据 JavaScript 的颜色主题将它们循环到display: block。但是我在控制台中遇到错误，但在网站代码中运行完美，它正在做我想要的同样的事情。

但问题是，当我编写其他功能时，它们无法解决此错误。

错误信息

Uncaught TypeError: Cannot read properties of undefined (reading 'style')

我的 JAVASCRIPT 代码

const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
const body = document.body;

function darkLogoToggle() {
  for (let i = 0; i <= darkLogos.length; i++) {
    darkLogos[i].style.display = "block";
  }
}

function lightLogoToggle() {
  for (let i = 0; i <= lightLogos.length; i++) {
    lightLogos[i].style.display = "block";
  }
}

if (prefersDarkScheme.matches) {
  body.classList.toggle("dark");
  darkLogoToggle();
} else {
  body.classList.toggle("light");
  lightLogoToggle();
}

【问题讨论】：

您的徽标可能丢失了。你能记录你所有的标志，比如console.log(darkLogos[i])和console.log(lightLogos[i])吗？
数组索引从零开始，您正在遍历最后一个索引。
能否分享darkLogos的内容。根据您分享的错误，darkLogos[i] 似乎是未定义的。
是的，你应该把<=改成<@Teemu提到的。
这能回答你的问题吗？ for loop undefined 'error'

标签： javascript html css

【解决方案1】：

您只需要迭代直到最后一个元素。所以，正确的条件应该是i < darkLogos.length和i < lightLogos.length

const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
const body = document.body;
  
function darkLogoToggle() {
  for (let i = 0; i < darkLogos.length; i++) {
    darkLogos[i].style.display = "block";
  }
}

function lightLogoToggle() {
  for (let i = 0; i < lightLogos.length; i++) {
    lightLogos[i].style.display = "block";
  }
}

if (prefersDarkScheme.matches) {
  body.classList.toggle("dark");
  darkLogoToggle();
} else {
  body.classList.toggle("light");
  lightLogoToggle();
}

【讨论】：