skip to Main Content

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

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 ?

2

Answers


  1. 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") 
    
    Login or Signup to reply.
  2. This trick work for me you can try it:

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

    or

    $(".test_class").css({ "display": 'none' })
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search