Question

classList无法按预期工作

var button = document.getElementById('dropdown-trigger'),
    dropdownList = document.getElementsByClassName('dropdown-list'),

button.addEventListener('mouseover', displayDropdown);

function displayDropdown() {
  dropdownList.classList.add('none');
}

我一直在控制台：

未捕获的TypeError：无法读取未定义的属性“add”

但是如果我使用classList就像：

function displayDropdown() {
  button.classList.add('none');
}

它会工作得很好。好像我不能在其他元素上使用classlist？

Answer 1

document.getElementsByClassName返回元素列表，而不是单个元素（因此'element s '）。您需要在每个元素上添加类。如果只有一个下拉列表，您也可以为其指定一个ID并使用getElementById代替。

Answer 2

好像我不能在其他元素上使用classlist。

你可以，但不能在NodeList集合上。您应该遍历集合或从集合中获取特定项目。

dropdownList[0].classList.add('none');

另一种选择是使用querySelector方法而不是getElementsByClassName。 querySelector函数选择第一个匹配元素。

dropdownList = document.querySelector('.dropdown-list')

classList.add（）在函数中不起作用？

2 个答案: