Is there any other way to change HTML style values?

Question

Hello i'm working in a "button" when clicked it shows/hide things inside a div, and this thing are other divs that I did organize in grids so it have a better display and it's also made to be seen on mobile so here's where the problem starts.

    var vid = document.getElementById("vids3");
    if (vid.style.display == "none") {
        vid.style.display = "grid";
       pageScroll();
       return
    } return vid.style.display = "none";
}

this function injects the grid style in the html but it also blocks me from changing the style using css, this section of code below works, but only if, I do set it to be !important, but it breaks the code since this section is supossed to be hidden until user try acessing it.

    #vids3{
        overflow-x: scroll; 
        display:flex;
    }

Basically I need other ways to change my display style value so it doesn't goes to the top priority

html div: <div class = 'videogrids' id = 'vids3' style = "display:none">

Use a class that you add and remove, and add the class to the CSS. — Barmar, Apr 29 '22 at 02:12
Look here if you are unfamiliar with how to do what @Barmar is recommending. https://stackoverflow.com/questions/26736587/how-to-add-and-remove-classes-in-javascript-without-jquery — Ryan O'D, Apr 29 '22 at 03:23
I was, then I did this and it worked, thanks! with that I was able to remove the style at the html div `if (vid.classList[0] == 'hidden') { vid.classList.add('videogrids'); vid.classList.remove("hidden"); }` — JayJay, Apr 29 '22 at 03:42

score 0 · Accepted Answer · answered Oct 19 '22 at 09:45

You should avoid inline styles. Generally when you want an element to change its state from an event, you should add or remove a class (or several classes)

const btn      = document.getElementById( "btn" ),
      boring   = document.getElementById( "boring" ),
      surprise = document.getElementById( "surprise" )
      
btn.addEventListener( "click", () => {
   boring  .classList.add   ( "hidden" )
   surprise.classList.remove( "hidden" )

   box.classList.remove( "boring"   )
   box.classList.add   ( "surprise" )

   btn.classList.add( "hidden" )
})

#box      { padding: 20px }
.hidden   { display: none }
.boring   { background-color: lightgray }
.surprise { background-color: pink      }

<span id="box" class="boring">
  <span id="boring">
     boring
  </span>
  <span id="surprise" class="hidden">
     surprise!
  </span>
</span>

<button id="btn">click me</button>

Is there any other way to change HTML style values?

1 Answers1