Question

style.display似乎不起作用

2017-12-18

1226

javascript css

我尝试隐藏/显示某些元素，但只有对父节点执行此操作时才有效，对子元素则无效。有人知道为什么会发生这种情况吗？

const ulList = document.querySelector('ul');
const studentList = ulList.querySelectorAll('li');

ulList.style.display = 'none'; // (when I do it like this, everything is fine).

studentList.style.display = 'none'; // (but if I do it like these, the error "Uncaught TypeError: Cannot set property 'display' of undefined" appears on the console)

谢谢帮助！

Answer 1

querySelector() 仅返回第一个匹配的单个元素，但 querySelectorAll() 返回列表。您必须对所有列表项应用样式。尝试以下方法：

const studentList = document.querySelectorAll('li');

studentList.forEach(function(li){
  li.style.display = 'none';
});

Answer 2

我明白你的意思……但是为什么当我这样做时（也在循环中），“block”的显示属性不起作用。解释器只是忽略它：

const ulList = document.querySelector('ul');
const studentList = document.querySelectorAll('li');

ulList.style.display = 'none';

for (let i = 0; i < studentList.length; i += 1) {
    if ((i + 1) >= numPage && i < y) {
        studentList[i].style.display = 'block';
    }
}

不要关注条件。它是我代码的一部分。循环和条件运行，当索引为 0 的第一个元素收到 block 属性时，什么也没有发生。