How to make a Css class disappear and appear using JavaScript

Question

so I have this CSS:

.cormes{
  font-size: 30px;
  margin-bottom: 10px;
  text-align: centre;
  }

I need to make that disappear and appear using javascript. I know you can use style.display='none' and style.display='inline-block' for normal ones. I don't know how to do this for classes. Please help

Use addClass and removeClass method available.https://www.w3schools.com/howto/howto_js_remove_class.asp — vipul patel, Oct 22 '19 at 15:10
Do you mean that you want to `activate` / `deactivate` the css class on an `Element` based on some user interaction? What type or interaction (mouseOver, click, timing)? Thanks to add some details — Jonathan Larouche, Oct 22 '19 at 15:10
I wanted to do it with a button. I got it now. Borjas answer helped alot. — A pessimistic optimist, Oct 22 '19 at 16:47

score 1 · Accepted Answer · answered Oct 22 '19 at 15:06

1

If you want to affect all elements with a class you have to loop in them:

var elems = document.getElementsByClassName('cormes');
for (var i = 0; i < elems.length; i++ ) {
    elems[i].style.display = "none";
}

More info about this here: https://stackoverflow.com/a/20946374/7919626

answered Oct 22 '19 at 15:06

Word Rearranger

1,306
1
16
25

Thankyou. Now I have the problem where when I "inline-block" each element back after "none" ing them everything gets out of structure. – A pessimistic optimist Oct 22 '19 at 17:26
Maybe because the elements were not inline-block before you changed it. Try "block" or "inline" instead. – Word Rearranger Oct 22 '19 at 17:37

Thomas Ludewig · Answer 2 · 2019-10-22T15:24:22.613

either you assign a class which is invisible or you add a new style to a existing class. Usually its not a good idea to redefine css classes due side effects. For the sake of showing you something new i use the visibility css rule. Display : "none" would do the same. This new class i would add either hard coded in the css or by js.

 .cormes_invisible{visibility:hidden;}

Now all you has to do is to simply change the class name. I add "_invisible" so its rather trivial to restore the original class later one by using the split function. So there is nothing complicated or strange in it :)

      function makeinvisible(id){
       var element=document.getElementById(id)
        try { // rather brutal way
          element.classList.remove("cormes");
          } catch (ex){}
          element.classList.add("cormes_invisible");
   }    

        function makevisible(id){
       var element=document.getElementById(id)
        try { // rather brutal way
          element.classList.remove("cormes_invisible");
          } catch (ex){}
          element.classList.add("cormes");
      }

another way would be to add a style attribute with the invisible css. and remove it afterwards. There are a few posiibilitys. (And alot of very nice tutorials in the web ;))

btw: the other classic way would be :

      var elements =document.getElementsByClassName("cormes");

      for (i=0;i<elements.length;i++){
       try { // rather brutal way
          elements[i].classList.remove("cormes");
          } catch (ex){}
          elements[i].classList.add("cormes_invisible");
      }

BBM · Answer 3 · 2019-10-22T15:29:19.237

0

First get the classes wrapped in the HTMLCollection, and then hide each one with with a forEach

const elements = document.getElementsByClassName('cormes');
Array.prototype.forEach.call(elements, element => element.style.display = 'none');

The same with ...display = 'initial', if we want to show them again. Would be useful to create a function for easily show and hide the cormes.

function showCormes(show) {
  const styleValue = show ? 'initial' : 'none';
  Array.prototype.forEach.call(elements, element => element.style.display = styleValue);
}

So we can easily show and hide that way:

showCormes(true);
showCormes(false);

edited Oct 22 '19 at 15:29

answered Oct 22 '19 at 15:17

BBM

31
3

You are a life savour. – A pessimistic optimist Oct 22 '19 at 16:44
Now I have the problem where when I "inline-block" each element back after "none" ing them everything gets out of structure. – A pessimistic optimist Oct 22 '19 at 17:26

How to make a Css class disappear and appear using JavaScript

3 Answers3