CODEWITHSUNDEEP
javascripthtml
Computer Backup
Computer Backup

Reputation: 187

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 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

Upvotes: 5

Views: 35674

Answers (3)

Richard Dalton
Richard Dalton

Reputation: 35793

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

Upvotes: 5

baao
baao

Reputation: 73251

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';
});

Upvotes: 4

James Thorpe
James Thorpe

Reputation: 32212

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

Upvotes: 8

Related Questions