Question

未捕获的类型错误：无法读取未定义的属性（读取‘style’）

2021-09-27

14906

javascript html css

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

我有多个不同部分的徽标，因此我通过它们的 className 抓取它们，并根据 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();
}

Answer 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();
}