I can't add Style using the HTMLElement-CodePudding

I am trying to collect the elements by class and store them in a variable using document.getElementsByClassName('class'). When I do a console log of these elements it returns the elements correctly. enter image description here

enter image description here

but when I try to add a style.display = 'none' I get an error with the 'style' . When I hover over the style the error tells me the following: ' Property 'style' does not exist on type 'HTMLCollectionOf'.

enter image description here

I tried adding as HTMLCollectionOf at the end, but I still get the same error.

let rows_hide = document.getElementsByClassName('brand-'  element) as HTMLCollectionOf<HTMLElement>;

I have also tried putting rows_hide[0].style.display = 'none' but it still doesn't fix it. I have tried several combinations with these solutions that I have found in the answers of other questions like using .addClass and adding the styles in the CSS file. But it still doesn't work. enter image description here

How could I add display : ' none' to the elements I collect ?

CodePudding user response：

The issue is that getElementByClassName returns every with this class name.

If you only want the first, you may use

document.querySelector(".class")

or if you want to change style for each element something like this should do the trick

[...document.getElementsByClassName("class")].forEach(el => (el as HTMLElement).style.display="none")

CodePudding user response：

This trick work for me you can try it:

 let element = document.querySelector(".test_class")
    if(element)
        element.style.display = "none";

$(".test_class").css({ "display": 'none' })