Question

我正在用JavaScript编写一些我需要使用的querySelectorAll.style，但它总是返回undefined，但它与querySelector.style完美匹配。如何使其正常工作以便我可以设置样式？

document.querySelector("div#tabs" + tabId + "> div.page").style.display = 'none'; //works
document.querySelectorAll("div#tabs" + tabId + "> div.page").style.display = 'none';// doesn't work

Answer 1

querySelector：

返回文档中的第一个元素......

querySelectorAll：

返回文档中元素的列表...

在第一个IE中，您在单个元素上运行，该元素具有style属性。第二个是元素列表，因此您需要使用样式循环遍历该列表：

var els = document.querySelectorAll("div#tabs" + tabId + "> div.page");
for (var x = 0; x < els.length; x++)
    els[x].style.display = 'none';

Answer 2

querySelectorAll返回元素列表而不是单个元素。

所以这应该适用于将样式应用于找到的第一个元素：

onRender: function() {
     this.$el.find('ul').on( 'scroll', function(){
         console.log('scroll event captured'):  
     });
}

Answer 3

querySelectorAll返回一个html元素集合，而不是单个元素，因此你需要循环结果：

Array.from(document.querySelectorAll("div#tabs" + tabId + "> div.page"))
    .forEach(function(val) {
        val.style.display = 'none';
});

querySelectorAll.style不起作用

3 个答案: