使用javascript无法正常加载类

Question

我正在尝试使用javascript在页面加载上添加一个类。我正在学习javascript，所以请耐心等待。我只是想改变一个元素的背景颜色作为下面的测试。我收到错误“Uncaught TypeError：无法读取属性'classList'的null”

我知道我很可能在这里错过了一个非常简单的步骤，所以我将不胜感激。

全部谢谢

window.onload = onPageLoad();

function onPageLoad() {
    document.querySelector('.home').classList.add = ('active');
}

.bg-yellow {
  background-color: yellow;
}

.active {
  background-color: green;
}

div {
  height: 400px;
  width: 400px;
}

<div class="bg-yellow"></div>

Answer 1

首先，在分配时从()删除window.onload = onPageLoad();，否则它会立即调用它。

其次，它应该是.classList.add('active');，而不是.classList.add = ('active');。

第三，元素的类选择器为.bg-yellow，而不是.home。

Stack snippet

window.onload = onPageLoad;

function onPageLoad() {
    document.querySelector('.bg-yellow').classList.add('active');
}

.bg-yellow {
  background-color: yellow;
}

.active {
  background-color: green;
}

div {
  height: 400px;
  width: 400px;
}

<div class="bg-yellow"></div>

Answer 2

删除=符号。我记得，.add（）是一个函数。同时在querySelector函数中搜索.bg-yellow，而不是.home，假设这是您要为给定代码示例添加类的内容。或者添加＆＃39; home＆＃39;到.bg-yellow div的类，例如

<div class='bg-yellow home'><div>。

您收到的错误是因为根据您提供的示例，您的页面中不存在.home。因此，.querySelector在搜索该选择器时将返回null（请参阅the standard），并且没有为null个对象定义classList。