如何在JavaScript中赋予！important

Question

I am hiding one div and showing another. But I can't hide first div when the second is block. I think that's because first is bootstrap and need to overwrite to display with !important to run display: none; correctly. But how can I use the it in Javascript.

function switchVisible() {
      if (document.getElementById('main-card')) {

          if (document.getElementById('main-card').style.display == 'none') {
              document.getElementById('main-card').style.display = 'block';
              document.getElementById('map').style.display = 'none';
          }
          else {
              document.getElementById('main-card').style.display = 'none';
              document.getElementById('map').style.display = 'block';
          }
      }
  }

I tried 'none !important' but that doesn't work.

Answer 1

How about using Jquery much more simple. And it'll fix your problem.

$('body').on("click touchstart", "#Button1", function(e){
   $("#main-card, #map").toggle();
});

Answer 2

you can use inline css style by jquery:

$('body').on("click touchstart", "#Button1", function(e){
   $("#main-card).css("display","none");
});

inline css is nearly !import