javascript - querySelectorAll.style does not work

Question

I am writing something in JavaScript that I need to use querySelectorAll.style but it always returns undefined, but it works perfectly with querySelector.style. How can I make it work properly so I can set the 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:

Returns the first element within the document...

querySelectorAll:

Returns a list of the elements within the document...

IE in the first one, you're operating on a single element, which does have a style property. The second one is a list of elements, so you need to loop over that list applying the style:

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