Queryselectorall.style Does Not Work

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

Solution 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';

Solution 2:

querySelectorAll returns a list of elements rather than a single one.

So this should work to apply the style to the first element found:

document.querySelectorAll("div#tabs" + tabId + "> div.page")[0].style.display = 'none'; // First element

Solution 3:

querySelectorAll returns a html collection of elements, not a single element, so you need to loop over the results:

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